Question

新的反应和减少与国家管理有点挣扎。在下面的代码中，我有一个按钮。单击它会触发两步功能：

1）调用reducer进行一些验证，并根据状态是否成功更新状态。

2）使用状态更新标志通知用户验证失败，或者如果成功则继续正常过程。

transfer() {
  this.props.validateData();
  this.notifyOrSend(this.props.validationSucceeded);
}

notifyOrSend(validationSucceeded) {
  if (validationSucceeded === false) {
    this.refs.validationModal.showModal();
  } else {
    this.props.sendTransfer();
  }
}

render() {
    return (
      <div>
        <Button label="Transfer" onClickFn={this.transfer}/>
        <ValidationModal ref="validationModal"/>
      </div>
  );
}

...

function mapStateToProps(state) {
  return {
    validationSucceeded: state.validatedData.validationSucceeded,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    validateData,
  }, dispatch);
}

我的问题是我得到了旧版本的标志（this.props.validationSucceeded）。旗帜的初始状态为真。如果第一次单击该按钮时验证失败，则this.props.validationSucceeded的值仍为true。仅在第二次单击时才会选择更改为false。我可以在控制台中看到，触发的操作具有nextState中标志的最新值。如何更改此代码以获取最新值？

Answer 1

setState更像是一个事件，它不会立即发生，因此为什么你可以将第二个函数传递给将在实际发生时执行的setState。

由于您之后立即调用notifyOrSend，因此在下一次渲染发生之前，状态仍然相同。我将研究将notifyOrSend函数移动到组件的适当生命周期方法中。我认为它可能是componentDidUpdate或componentWillUpdate，具体取决于notifyOrSend函数实际执行的操作。

来自反应文档：

setState（）不会立即改变this.state但会创建一个待定状态转换。调用后访问this.state 方法可以返回现有值。没有保证调用setState和调用的同步操作为获得业绩增长而受到批评。

在onClick函数中没有获得当前状态

1 个答案: