在函数中调用 setState() ，并在状态改变后继续下一个兄弟函数 - 这可能吗？

Question

假设我有这样的事情：

在上下文提供程序中：

toggleLogin(isLoggedIn) {

     this.setState({

         isLoggedIn: isLoggedIn

     });

}

在使用上下文的登录组件中：

(....)

this.props.context.toggleLogin(true);

this.props.history.push("/"); 

(....)

我想要 this.props.history.push("/") 或我将在 toggleLogin() 之后放置的任何其他函数，仅当 toggleLogin 函数完成更新状态时才执行。现在它运行良好。

但我认为因为 setState 是异步的，所以它的工作原理如下：

执行切换登录

在 toggleLogin 中开始执行 setState

执行 this.props.history.push("/")

在 toggleLogin 中完成 setState

它在我的情况下有效，因为状态设置得非常快。

但是因为它的工作方式似乎是这样工作的：

执行切换登录

执行 setState

执行 this.props.history.push("/")

我正在检查“/”路由组件中的 isLoggedIn 状态，这就是为什么我希望它仅在 setState 完成后执行。这是另一个组件，所以我不能使用 setState 回调。

this.props.history.push("/")真的是在toggleLogin完成后执行吗？如果没有，我怎样才能做到这一点？我不觉得让 toggleLoginasync和awaitingsetState然后then()在登录组件中使用是一个好主意 - 也许我错了，我只是从 ReactJS 开始。

任何人都可以用正确的方法来启发我吗？谢谢

Answer 1

setState是异步的，无法保证在您调用时会完成history.push。为了确保在执行某些操作之前完成所有更新，请使用第二个参数setState，允许我们callback在状态更新后传递 a以执行。您可以将此回调传递给toggleLoginthis.props.context.toggleLogin(true, () => this.props.history.push('/'))而在 toggleLogintoggleLogin(isLoggedIn, cb) {     this.setState({         isLoggedIn: isLoggedIn     },  cb);}