React.js: Warum die Kindkomponente den Elternstatus ändert?

Question

Warum in diesem Beispiel die untergeordnete Komponente den übergeordneten Komponentenstatus ändern? Laut der Facebook (react.js) -Dokumente ist State den Requisiten ähnlich, aber es ist privat und wird vollständig von der Komponente kontrolliert.

codepen example

class NameForm extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {data: this.props.data}; 
    } 

    handleChange(event) { 
    let updatedData = Object.assign({}, this.state.data); 
    updatedData[event.target.name][event.target.dataset.lang] = event.target.value; 

    this.setState({ 
     data: updatedData 
    }); 
    } 

    render() { 
    return (
     <form> 
      {Object.keys(this.props.data.titles).map((l, index) => 
      <input type="text" name="titles" data-lang={l} value={this.state.data.titles[l]} onChange={this.handleChange.bind(this)} /> 
     )} 
     </form> 
    ); 
    } 
} 

class App extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     images: [{"titles": {"en": "deluxe1500x930.jpg"} 
     }], 
     count: 1 
    }; 
    } 

    render() { 
    return (
     <div> 
      {Object.keys(this.state.images).map((x,index) => 
      <div> 
       {this.state.images[x].titles.en} 
       <NameForm data={this.state.images[x]} /> 
       <button onClick={(() => {this.setState({ count: 2 })}).bind(this)}>test</button> 
      </div> 
     )} 
     </div> 
    ) 
    } 
} 

Answer 1

Da Sie den Zustand mit this.props.data gesetzt. die this.props.data kam von der Eltern, daher wenn es sich ändert, so ändert sich auch der Zustand.

Die Lösung ist einfach, setzen Sie einfach den Status mit einem neuen Wert (kopiert von this.props.data), indem Sie den Spread-Operator verwenden, anstatt die gleiche Referenz zu verwenden.

this.state = {data: ...this.props.data};