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

Question

假设我有这样的东西:

在上下文提供者中:

toggleLogin(isLoggedIn) {
     this.setState({
         isLoggedIn: isLoggedIn
     });
}

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

(....)
this.props.context.toggleLogin(true);
this.props.history.push("/"); 
(....)

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

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

1. 执行toggleLogin
2. 在toggleLogin中开始执行setState
3. 执行 this.props.history.push("/")
4. 在 toggleLogin 中完成 setState

它在我的案例中起作用，因为状态设置得非常快。

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

1. 执行toggleLogin
2. 执行设置状态
3. 执行 this.props.history.push("/")

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

this.props.history.push("/")真的是在toggleLogin结束后执行的吗？如果没有，我怎样才能让它这样做？ 我不觉得让 toggleLogin async 和等待 setState 然后在登录组件中使用 then() 是个好主意 - 也许我错了，我刚刚开始使用 ReactJS。

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

Answer 1

setState 是异步的，无法保证在您调用 history.push 时会完成。为确保在执行某些操作之前完成所有更新，请使用 setState 的第二个参数，它允许我们传递一个 callback 以在状态更新后执行。您可以将此回调传递给 toggleLogin

this.props.context.toggleLogin(true, () => this.props.history.push('/'))

并且在 toggleLogin

toggleLogin(isLoggedIn, cb) {
     this.setState({
         isLoggedIn: isLoggedIn
     },  cb);
}