React.js：如何在道具更新后检查？答案

【问题标题】：React.js: How to check after a props update?React.js：如何在道具更新后检查？
【发布时间】：2019-05-22 15:42:05
【问题描述】：

我有 4 个表单字段，用户可以在其中选择或输入值，以进入下一步。以下是这些字段之一：

<Form.Field
  control={Checkbox}
  checked={this.props.donationCheckbox10}
  label='$10'
  value={10}
  onChange={() => {
    this.props.dispatchUpdateStateData('', 'donationInputField');
    this.props.dispatchUpdateStateData(!this.props.donationCheckbox10, 'donationCheckbox10');
    this.clearTheOtherCheckboxes(10);
    console.log(store.getState());
    this.checkIfReadyToAdvance();
  }}
/>

如您所见，它调度了一些操作来更新 Redux 存储，然后检查用户是否可以前进。

问题是由于道具尚未更新和重新渲染，因此总是错过提前条件。至少我认为这是基于记录 this.checkIfReadyToAdvance() 的问题（getState() 调用返回更新的值，因为它不等待重新渲染）

我相信componentWillUpdate() 已被弃用。在 Redux 商店更新组件后运行函数的现代方式是什么？

这里是checkIfReadyToAdvance()

checkIfReadyToAdvance() {
    if (
      this.props.donationCheckbox10 ||
      this.props.donationCheckbox25 ||
      this.props.donationCheckbox50 ||
      this.props.donationInputField
    ) {
      this.setState({
        canNotAdvance : false
      });
      console.log("ready");
    } else {
      this.setState({
        canNotAdvance : true // in case all values are falsey again
      });
      console.log("not ready");
    }
  }

【问题讨论】：

如果checkIfReadyToAdvance计算派生状态，这里就不计算了。可以在每次重新渲染时计算，可以在道具更改时计算，也可以在商店中计算。
谢谢，你能发一个例子吗？
如果您向我们展示了 checkIfReadyToAdvance 的实际作用，将会有所帮助。
我会将该功能发布到原始帖子中。我通过 componentDidUpdate() 让它工作，我认为这是最好的选择。好奇如何在道具更改或商店中实现它，如果您可以展示其中任何一个。
好吧，它是派生状态，我想知道你为什么还要将它保存到状态？为什么不是一个返回布尔值的函数，你调用它而不是访问状态？

标签： reactjs redux react-redux

【解决方案1】：

没有理由存储派生信息，除非该信息的计算需要大量性能。

isReadyToAdvance() {
   const { props } = this;

   return
      props.donationCheckbox10 ||
      props.donationCheckbox25 ||
      props.donationCheckbox50 ||
      props.donationInputField;
}

然后只使用!this.isReadyToAdvance() 而不是this.state.canNotAdvance。

从技术上讲，您还可以使用 componentWillUpdate（已弃用）来更新您的 state 或新的 getDerivedStateFromProps。

【讨论】：