Javascript React 16.0.0父子孙辈。父级中的更新状态不更新孙级

鉴于以下组件结构，我不想在父级中更新我的状态，然后应该更新我的孙子。我知道我可以使Child无状态或只更新Child中的状态，但在我们的应用程序中，这是当前的结构。有没有什么好方法可以做到这一点，或者我们应该重新设计？我们在父级中保留一个状态，因为我们不想向应用程序中的许多http请求发出请求。在parent中，我们获取所需的数据并进行初始修改。然后，这些数据被发送到其他组件，这些组件又有子组件，因此是示例结构

本例中打印的内容：

Test:1235

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface IProps {
}

interface IState {
  cases: number[];
}

class Parent extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      cases: [1, 2, 3],
    };
  }

  componentDidMount() {
    let newCase = 4;
    let newCases = Array.from(this.state.cases);
    newCases.push(newCase)
    this.setState({
      cases: newCases
    });
  }

  render() {
    return (
      <div>
        <Child cases={this.state.cases} />
      </div>
    );
  }
}

interface IChildProps {
  cases: number[];
}

interface IChildState {
  cases: number[];
}

class Child extends React.Component<IChildProps, IChildState> {
  constructor(props: IChildProps) {
    super(props);
    this.state = {
      cases: this.props.cases,
    };
  }

  componentDidMount() {
    let newCase = 5;
    let newCases = Array.from(this.state.cases);
    newCases.push(newCase)
    this.setState({
      cases: newCases
    });
  }

  render() {
    return (
      <GrandChild cases={this.state.cases} />
    );
  }
}

interface IGrandChildProps {
  cases: number[];
}

interface IGrandChildState {
}

class GrandChild extends React.Component<IGrandChildProps, IGrandChildState> {
  constructor(props: IGrandChildProps) {
    super(props);
  }

  render() {
    return (
      <div>
        Test: {this.props.cases.map((value, index) => {
          return <span key={index}>{value}</span>
        }
        )}
      </div>
    );
  }
}

export default Parent

import*as React from'React'；
从“react dom”导入*作为react dom；
接口IProps{
}
界面状态{
病例数【】；
}
类父类扩展了React.Component{
建造师（道具：IProps）{
超级（道具）；
此.state={
案例：[1,2,3]，
};
}
componentDidMount（）{
设newCase=4；
让newCases=Array.from（this.state.cases）；
newCase.push（newCase）
这是我的国家({
案例：新案例
});
}
render（）{
返回(
);
}
}
接口IChildProps{
病例数【】；
}
接口IChildState{
病例数【】；
}
子类扩展了React.Component{
建造师（道具：IChildProps）{
超级（道具）；
此.state={
案例：这个。道具。案例，
};
}
componentDidMount（）{
设newCase=5；
让newCases=Array.from（this.state.cases）；
newCase.push（newCase）
这是我的国家({
案例：新案例
});
}
render（）{
返回(
);
}
}
界面和道具{
病例数【】；
}
接口IGrandChildState{
}
类孙子扩展了React.Component{
构造器（道具：IGrandChildProps）{
超级（道具）；
}
render（）{
返回(
测试：{this.props.cases.map（（值，索引）=>{
返回{value}
}
)}
);
}
}
导出默认父级

这里的问题是，您正在将道具映射到状态，一旦发生这种情况，您将负责在道具更改时更新状态。因为您只使用了

componentDidMount

，所以它只将道具映射到状态一次。我通常倾向于避免让组件将道具转换为自己的状态，而是让父组件以其需要的任何方式将道具传递给子组件，而不必担心在子组件中道具更改时更改状态

另一个选项是使用

组件willreceiveprops

生命周期方法并执行以下操作

 setCases(cases) {
    let newCase = 5;
    let newCases = Array.from(cases);
    newCases.push(newCase)
    this.setState({
      cases: newCases
    });
  }

  componentDidMount() {
    this.setCases(this.props.cases)
  }

  componentWillReceiveProps(nextProps) {
    this.setCases(nextProps.cases);
  }

---

componentDidMount

将处理初始加载时的状态设置，然后

componentWillReceiveProps

将在props更改时处理状态更改

请注意，一般来说，尝试将道具“同步”到状态很少是个好主意。提升状态：