Question

我有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");
    }
  }

Answer 1

没有什么理由可以存储派生的信息，除非对该信息进行计算会导致性能负担很大。

isReadyToAdvance() {
   const { props } = this;

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

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

从技术上讲，您也可以使用componentWillUpdate（不建议使用）更新您的state或新的getDerivedStateFromProps。

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

1 个答案: