React如何通过getDerivedStateFromProps更新初始值？

Question

问题描述

举个栗子🌰:
假设存在三个有层次关系的组件,在顶级组件<One />获取到初始化数据后往后面两级组件回传<Two /><Three />,由于<Two /><Three />都拥有可修改自身数据的功能,<One />组件如何利用getDerivedStateFromProps把初始值赋值给子组件,但不影响其后续操作修改自身数据;

// 第一级组件: 获取初始化数据
class One extends React.Component{
   componentDidMount() {
     // 异步获取数据
     this.setState({
       initTwoData: xxx,
       initThreeData: xxx,
     })
   }
   ...
   render(){
     const { initTwoData, initThreeData } = this.state;
     return (
         <Two
           initTwoData={initTwoData}
           initThreeData={initThreeData}
         />
     )
   }
   ...
}

// 第二级组件
class Two extends React.Component{
   state = {
      threeData: [],
   }
   static getDerivedStateFromProps(nextProps, prevState){
     //...
   }

   onChange() {
    // 此步骤会修改threeData的值,但会因为getDerivedStateFromProps的调用导致threeData的值重置为initThreeData
   }
   ...
   render(){
     const { initThreeData } = this.state;
     return (
         <Three
           initThreeData={initThreeData}
         />
     )
   }
   ...
}

// 第三级组件雷同

Answer 1

多加一个属性判断是否第一次, 第一次赋值以后把他取反,每次都判断一下就行。

Answer 2

这东西就props往下传就行了...只不过伴随一个条件...
比如data里有值判断是不是新的数据...是新的数据就重新赋值给state...不是新数据就当做后续操作return null就行了