Question

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

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

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

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

如果我修改formdata上的任何内容，都会反映在initialFormData上。我用表格映射了表格数据。如果我修改名称，它应该仅反映在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

初始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参考。这样一来更改data.isActive仍会影响状态中的两个值。

阅读article中的差异。

Answer 3

这有效。您希望为状态中的两个项目复制表单数据对象。这样就可以了。

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

let State = { 

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

console.log(State)

反应-一个对象的更改即使未修改也反映在另一个对象上

3 个答案: