Question

为什么当我改变一个状态，所有其他改变？怎么预防这个？在一个函数中，我创建了两个状态，接收到data然后将这两个状态传递给子prop：

父：

...

// getInitialState: foo and bar

...

// An ajax calls this with an array data
// My two states: foo and bar
getData(data){
  this.setState({ foo: data, bar: data });
}

// Render
<Child myFoo={this.state.foo} myBar={this.state.bar} />

儿童：

getInitialState(){
  return{
   childFoo: this.props.myFoo,
   childBar: this.props.myBar
  }
},

valueChange(i, e){
 // i is passed in as a number when this function is called.
 // to show how "i" is passed in is not important
 e.preventDefault();
 var obj = this.state.childFoo;
 var num = obj.find(p => i === p.id);

 // This changes both of my states! Why?
 num.unit_amount = e.target.value;
}

有人可以解释为什么childBar也会发生变化吗？我只需要更改一个，然后使用另一个来比较值。

Answer 1

这是因为您的state个属性都引用了同一个对象，即data。

当您更改this.state.childFoo时，您还要更改this.state.childBar，因为它们与父组件中的data完全相同。

尝试将data对象复制到每个状态属性中，而不是引用它。

函数改变两个状态而不是一个状态

1 个答案: