反应改变道具大规模错误

Question

我是新的反应，可能做错了。

我有一个主要的父母组件和他的孩子和孩子的主要孩子（孩子2）。

main-＆gt; child1-＆gt; child 2

我通过props.items发送数据给child1：

main.js

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

然后我重新发送给child2：

child1.js

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

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

在孩子2中，我改变了这个数据并调用了child1函数搜索：

child2.js

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

我只想在搜索功能中重写this.props.items，但有一个错误：

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

我如何才能正确更改？感谢

Answer 1

你不能这样做：

this.props.items=res;

道具和统计数据是非可变对象。只需在组件状态内创建一个新项目：

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

Answer 2

你无法更新道具，它们是不可变的。如果你想在你的顶级父级中使用被操作的结果值，而不是在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);
}