Question

我正在为我的项目使用Reactjs。如果我有这样的状态：

state = {
   child:menuList
   parent1:{
     key1:'some value',
     key2:'some value'
   }
   parent2:{
     key1:'some value',
     key2:'some value'
   }
   parent3:{
     key1:'some value',
     key2:'some value'
   }
}
componentDidMount(){
   const {child} = this.state;
   let {parent1,parent2,parent3} = this.state
   parent1.key3=child;
   parent2.key3=child;
   parent3.key3=child;
   this.setState({
       parent1,
       parent2,
       parent3
   })


}

子状态是对parent1，parent2和parent3的引用

如果我这样更新子状态：this.setState({child:menuList2})，是否会自动更新parent1，parent2和parent3？

如果没有，如果子状态已更新，最有效的方法来更新parent1，parent2和parent3状态

Answer 1

根据以上child状态给出的代码，每次您的组件被分配为parent1时，它们都将被分配给parent2，parent3和key3已安装。万一组件更新且子状态发生变化，则由于组件已安装，因此parent1，parent2和parent3将不具有子状态。

解决此复杂状态问题的最佳方法是使用状态管理框架，例如redux，然后将组件拆分为Presentational组件和Container组件。您可以快速阅读此link，以详细了解它。

执行此操作的另一种可能方法是将完成安装的代码提取到另一个函数中，并且当子代与先前状态不同时，可以使用componentDidUpdate生命周期更新父代。因此您的代码应如下所示：

state = {
   child:menuList
   parent1:{
     key1:'some value',
     key2:'some value'
   }
   parent2:{
     key1:'some value',
     key2:'some value'
   }
   parent3:{
     key1:'some value',
     key2:'some value'
   }
}
componentDidMount(){
   this.updateParent();
}

componentDidUpdate(prevProps,prevState) {
    const { child } = this.state;
    const prevChild = prevState.child;
    if(prevChild !== child) {
        this.updateParent();
    }
}

updateParent() {
    const {child} = this.state;
    let {parent1,parent2,parent3} = this.state
    parent1.key3=child;
    parent2.key3=child;
    parent3.key3=child;
    this.setState({
        parent1,
        parent2,
        parent3
    })
}

请记住检查componentDidUpdate中的条件，否则您的组件将进入无限的重新渲染循环。如果您使用的是React 16.3.0或更高版本，则可以查看getDerivedStateFromProps和实现这一目标的新生命周期。

如果参考状态已更新，如何最有效地更新父状态

1 个答案: