React.js：なぜ子コンポーネントが親状態を変更するのですか？

Question

この例では、子コンポーネントが親コンポーネントの状態を変更する理由は何ですか？ Facebook（react.js）によると、状態は小道具に似ていますが、非公開であり、コンポーネントによって完全に制御されています。

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

あなたはthis.props.dataで状態を設定しているため。 this.props.dataは親から来ているため、状態が変わると状態も変わります。

解決方法は単純です。同じ参照を使用する代わりに、スプレッド演算子を使用して新しい値（this.props.dataからコピー）で状態を設定するだけです。

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