在函数中调用 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以执行。您可以将此回调传递给toggleLogin

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

而在 toggleLogin

toggleLogin(isLoggedIn, cb) {

     this.setState({

         isLoggedIn: isLoggedIn

     },  cb);

}