Funktion ändert zwei Zustände statt einer

Question

Warum, wenn ich einen Zustand ändere, alle anderen Änderungen? Wie kann man das verhindern? Innerhalb einer Funktion erstelle ich zwei Zustände mit dem data dann diese beiden Zustände nach unten auf das Kind prop passieren erhalten:

Parent:

... 

// 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} /> 

Kind:

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; 
} 

Could jemand erklären, warum childBar ändert sich auch? Ich muss nur eins ändern und dann das andere verwenden, um Werte mit zu vergleichen.

Answer 1

Das liegt daran, dass beide Ihre state Eigenschaften auf dasselbe Objekt verweisen, das data ist.

Wenn Sie this.state.childFoo ändern, ändern Sie auch this.state.childBar, weil beide dasselbe mit data von der übergeordneten Komponente sind.

Versuchen Sie, das Objekt data in jede der Statuseigenschaften zu kopieren, anstatt es zu referenzieren.