Question

// 1 - Parent - Wrong
render() {
const { record } = this.state;
if (!record) { return null; }
return (
  <div>
    <p>Now this is visible</p>
    <Children id={record.id};
  </div>
  );
}

// 2 - Parent - Right
render() {
  const { record } = this.state;
  const recordId = record ? record.id : null;

  return (
    <div>
      <p>Now this is visible</p>
      <Children id={recordId};
    </div>
  );
}

// Children
componentWillReceiveProps(nextProps) {
  console.log(nextProps.id);
}

如果状态变为：this.state = {record：{id：'demo'}}

将代码编写为第一种方法，即使父记录因为收到新状态而变为可见，也始终在子组件的componentWillReceiveProps中定义nextProps。

虽然第二个工作正常。

为什么第一次工作不正确？

Answer 1

根据official document，React在安装过程中不会使用初始道具调用componentWillReceiveProps。如果某些组件的道具可能会更新，它只会调用此方法。

我为您的问题找到了解决方法，并为解决方案创建了以下小提琴。它应该解决你所有的问题。

小提琴 - https://jsfiddle.net/4o7o6cmw/4/

当父组件从null开始时，不会更新Children组件的props

1 个答案: