使用 complex/nested 状态更新重新渲染 React child 组件

Question

下面是我实际代码的示例版本。

// parent component
this.state = {
  ...,
  dummies: [
    {id: 1, name: "nothing"},
    {id: 2, name: "nothing"},
    {id: 3, name: "nothing"}
  ],
  ...
};

render(){
  return <ChildComponent dummies={this.state.dummies} />;
};

// ChildComponent
this.state = {
  ...,
  dummies: this.props.dummies
};
...
{
  this.state.dummies.map((eachDummy) => {
    return <GrandChild id={eachDummy.id} dummy={eachDummy} />
  });
}

经过一些互动，我正在更新 parent 状态下的假人，如下所示

this.setState({
  ...this.state,
  dummies: [
    {id: 1, name: "something"}, // observe change in name property
    {id: 2, name: "nothing"},
    {id: 3, name: "nothing"}
  ]
})

真正的问题来了。当 dummiess 的名称属性发生微小变化时，如何让我的 Child 和 GrandChild 组件呈现？我认为 React 的浅比较无法识别变化，但我需要 Child 和 GrandChild 来重新渲染和更新 UI。我怎样才能做到这一点？（请注意，我无法避免状态中的 objects 数组）

Answer 1

为了在更新父组件状态时重新渲染孙组件，它最终必须通过 props 在其渲染方法中使用父组件的状态。在您的子组件的渲染方法中，您从子组件的 state 而不是它的 props 传递给孙组件 'dummies'。

以下是您所描述的工作示例：

class Parent extends Component {
  constructor() {
    super();
    this.state = {
      dummies: [
        {id: 1, name: "nothing"},
        {id: 2, name: "nothing"},
        {id: 3, name: "nothing"}
      ]
    }
  }

  render() {
    return <div>
      <button onClick={() =>
        this.setState({
          dummies: [
            {id: 1, name: "nothing"},
            {id: 2, name: "nothing"},
            {id: 3, name: "something"}
          ]
        })
      }>
        Update state
      </button>
      <Child dummies={this.state.dummies} />
    </div>
  }
}

class Child extends Component {
  render() {
    return this.props.dummies.map(dummy => <GrandChild name={dummy.name} />);
  }
}

class GrandChild extends Component {
  render() {
    return <p>{this.props.name}</p>;
  }
}

ReactDOM.render(<Parent />, document.getElementById('root'));

使用 complex/nested 状态更新重新渲染 React child 组件

Rerender React child component with a complex/nested state update

reactjs

react-class-based-component