Question

我有一个设置状态的功能。设置状态后，我想调用一个函数。这是我的代码：

sanityChecking() {
    this.checkFirstName();
    this.checkSecondName();
    this.checkDomain();

    // Call this function after the top 3 functions finish setting their state
    this.Predict();
}

前三个函数中有setState。在它们全部完成更新之后，我试图运行第四个功能this.Predict。有什么想法吗？

Answer 1

setState可以内联设置多个状态，除此之外，它还具有如下回调函数：

this.setState({
    stateToChange: value,
    anotherStateToChange: value2,
    thirdValueToChange: value3
}, () => {
    console.log('I finished changing the states');
});

因此对于您的代码，您可以创建一个function来设置状态，并接受一个参数作为回调。然后在setState的第二个参数中添加该回调参数。像这样：

function checkFirstName(stateCallback) {
    setState({firstName: 'Charley'}, stateCallback);
}

然后将它们全部链接在一起。或者，您可以一次使用设置多个状态，然后将setState的回调作为第二个参数调用，就像我上面显示的那样。

有关此的更多信息，我遇到了一个cool article on setState，值得一读。（我没有从属关系。只是一个快速的Google搜索：）

让我知道这是否有帮助，或者您还有其他问题。

Answer 2

因为this.setState是异步的。您的三个功能可能甚至可以在一个更新中运行。您可以做的是，可以返回要更新的值，而不是在每个函数中调用this.setState。这样，您可以使用setState的第二个参数，这是一个回调。

sanityChecking() {
  this.setState({
    first: this.checkFirstName(),
    second: this.checkSecondName(),
    domain: this.checkDomain(),
  }, () => {
    this.setState({ predict: this.Predict());
  });
}

Answer 3

您可以为每个函数添加一个参数，该参数是setState调用的回调。

因此，在您的三个函数中，每个函数看起来都类似于以下内容：

function checkFirstName(setStateCallback) {
    ...
    setState({...}, setStateCallback)
    ...
}

在主要功能中，您可以将它们链接在一起：

function sanityChecking() {
  this.checkFirstName(function () {
      this.checkSecondName(function () {
          this.checkDomain(function () {
              this.Predict();
          })
      })
  })
}

Answer 4

在setState调用中使用函数而不是对象。了解更多in the React documentation

该函数将先前状态和调用时的props作为其第一个参数。这样可以确保状态为最新。

this.setState(
  (state, props) => ({
    predict: `${state.firstName} ${state.secondName}`
  })
);

在许多setState完成更新后执行函数

4 个答案: