関数は1つではなく2つの状態を変更します

Question

なぜ1つの状態を変更すると、他のすべての変更？これを防ぐ方法は？関数内で、私はdataで二つの状態を作成し、子小道具に至るまで、これらの二つの状態を渡す受け取っ：

親：

... 

// 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も変更されますか？私は1つを変えて、もう一方を使って値を比較する必要があります。

Answer 1

これは、stateの両方のプロパティが同じオブジェクトを参照しているためです（data）。

this.state.childFooを変更すると、this.state.childBarも変更されます。両方とも親コンポーネントのdataと同じものです。

dataオブジェクトを参照する代わりに、各状態プロパティにコピーしてみてください。