反应 setState 中的 setTimeout

2024-03-20

this.setState(prevState => ({
    score:            prevState.score + 10,
    rightAnswers:     prevState.rightAnswers + 1,
    currentQuestion:  setTimeout(() => {
      prevState.currentQuestion + 1
    }, 2000)
    }))
  }

单击按钮后我会更改状态。我的目标是延迟 currentQuestion 状态更改,在此期间我想显示某些状态消息,但我想立即更新分数而无需延迟。

这样做的正确方法是什么?

PS:这个变体不起作用,它是为了总体表示我想要做的事情。

Thanks.


您可以通过多种方式执行此操作:

1) 拨打两次电话setState。 React 将批处理任何并发调用setState批量更新,所以这样的事情是完全可以的:

this.setState( prevState => ({
  score: prevState.score + 10,
  rightAnswers: prevState.rightAnswers + 1
}));

setTimeout( () => {
  this.setState( prevState => ({
    currentQuestion: prevState.currentQuestion + 1
  }));
}, 2000);

2) 您可以使用setState更新状态的回调after您的第一个通话已完成:

this.setState(prevState => ({
  score:            prevState.score + 10,
  rightAnswers:     prevState.rightAnswers + 1
}), () => {
  setTimeout( () => {
      this.setState( prevState => ({
      currentQuestion: prevState.currentQuestion + 1
    }));
  }, 2000);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

反应 setState 中的 setTimeout 的相关文章

随机推荐