1

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

// 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} />
  });
}

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

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

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

4

1 回答 1

3

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

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

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'));
于 2021-05-01T02:08:45.007 回答