React - 一个对象的更改反映在另一个对象上，即使它没有被修改

Question

如果我将同一个对象分配给两个状态对象，我试图将对象的值更改为另一个。例如，服务返回如下数据

formData = {
  'name':'name',
  'data':{
    'value':'value',
    'isactive':false
    }
};

我试图将同一个对象分配给两个不同的状态对象

this.setState({ 
  formdata: formdata,
  initialFormData : formdata
});

如果我修改formdata上的任何内容反映在initialFormData上。我用表格映射了formdata。如果我修改名称它应该仅反映在formdata上，但它也修改了initialFormData但我不希望我的initialFormData不被更改因为我需要使用initialFormData重置整个数据，如果任何人点击重置按钮。

如何实现同样的目标。请帮帮我。提前致谢

如果您在下面需要更多信息评论。我可以提供相同的。

Answer 1

我想你想这样：

// outside the class
const initialFormData = {
  // your initial data
}
// inside the class
state = {
  formData: initialFormData
}
// when you want to update with initial data
this.setState({
  formData: initialFormData
})

Answer 2

这有效。您希望为状态中的两个项目复制表单数据对象。所以这将工作正常。

  let formData = {
  'name':'name',
  'data':{
  'value':'value',
  'isactive':false
 }
}; 

let State = { 

 initialFormData:Object.create(formData),
 formDat:Object.create(formData)
};

console.log(State)

Answer 3

初始setState（来自服务的数据）保存对一个（基础）对象的引用。这样，两个值都是指向相同数据的指针。这可以通过这种方式完成（对于初始渲染） - 问题在于字段处理程序，变异状态方法。

访问this.state.formdata的处理程序获取指向基础对象的指针。变异会改变这个对象，而不是（如你所愿）存储在this.state.formdata中的值（对象）。

let formdata = this.state.formdata; // OLD REFERENCE
formdata[field] = evt.value; // THIS WAY YOU"RE MUTATING BASE OBJECT
this.setState({ formdata: formdata }); // STILL THE SAME REFERENCE

您需要准备一个新对象（深度克隆）并在setState()中使用它

let newObj = JSON.parse(JSON.stringify( this.state.formdata ));
newObj[field] = evt.value;
this.setState({ formdata: newObj });

需要深度克隆作为基础对象formData包含data对象。通常的方法（分配，传播）正在做浅拷贝 - 他们将复制data参考。这样f.e.变异的data.isActive仍将影响州内的两个值。

阅读article关于差异。