1

如果我将同一个对象分配给两个状态对象，我正在尝试更改一个对象的值反映在另一个对象上。例如服务返回如下数据

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

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

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

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

如何达到同样的效果。请帮我解决这个问题。提前致谢

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

4

3 回答 3

2

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

您的处理程序通过访问this.state.formdata获取指向基础对象的指针。改变 this 会改变这个对象，而不是（如你所愿）存储在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引用。这样 fe 变异data.isActive仍然会影响状态中的两个值。

阅读有关差异的文章。

于 2018-09-06T08:08:07.780 回答
0

这行得通。您希望为状态中的两个项目复制表单数据对象。所以这会很好。

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

let State = { 

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

console.log(State)
于 2018-09-06T08:28:58.360 回答
0

我想你想要这样：

// 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
})
于 2018-09-06T07:56:25.167 回答