反応変化の小道具大量のエラー

Question

私は反応が新しいですし、何か間違っている可能性があります。

私は1つのメインの親コンポーネントとメインの子（子2）の子と子を持っています。私はそれがCHILD2する再送その後

<child1 items={this.state.lst}> 

main.js：

メーン> child1->子供2

iはprops.itemsでCHILD1にデータを送信

子1.js

私は検索機能でthis.props.itemsを書き換えるしたいが持っている

child2.js

someFunc(){ 
    //manipulate with this.props.dataChild2 and write it in result; 
    this.props.findData(result); 
    } 

：

search(res){ 
    this.props.items=res;   
    } 

<Find dataChild2={this.props.items} findData={this.search.bind(this)}/> 

は子供2では、私は、このデータを変更し、機能の検索をchild1の呼び出しエラー：

× 
TypeError: Cannot assign to read only property 'items' of object '#<Object>' 

どのように正しく変更できますか？おかげであなたはこれを行うことはできません

Answer 1

、彼らは不変です。あなたはむしろchild1のに検索方法を持つ、あなたの一番上の親での操作結果の値をしたい場合は、親にそれを移動し、そこに検索方法で結果をキャッチ -

親 -

<child1 items={this.state.lst} getData={this.search.bind(this)}> 

CHILD1 -

<Find dataChild2={this.props.items} findData={this.props.getData.bind(this)}/> 

CHILD2は -

someFunc(){ 
this.props.findData(result); 
} 

Answer 2

は：

this.props.items=res; 

小道具や統計は、非可変オブジェクトです。ただ、コンポーネントの状態の内側に新しいアイテムを作成：あなたが小道具を更新することはできません

this.setState({newItems: res}); 
... 
<Find dataChild2={this.state.items} findData={this.search.bind(this)}/>