javascript - 在 React 中设置超时

Question

我正在尝试弄清楚如何在 React 中触发 setTimeout。

我对 React 还很陌生，正在查看文档和“tic-tac-toe”指南。我修改了指南中的代码，我想在找到游戏获胜者 3 秒后将状态重置为初始值。

我能找到的唯一信息是在组件的生命周期中使用setTimeout，但就我而言，如果组件已安装，我不想设置Timeout。我想在 calculateWinner() 返回真值之后触发它。

是否有可能在 React 中实现类似的目标，或者为了做到这一点，我应该重组我的应用程序/组件架构吗？

这是我的示例:https://codesandbox.io/s/6l607x80r

大部分事情都发生在 Board 组件中，我在其中创建了一个 countDown() 函数，但我不确定如何触发它。

Answer 1

您可以像这样使用componentDidUpdate生命周期:

componentDidUpdate() {
  if (calculateWinner(this.state.squares)) {
    this.countDown();
  }
}

此外，您还需要更改 countDown 函数:

setTimeout(() => {
  this.setState({
      squares: Array(9).fill(null),
      xIsNext: true,
    })
  }, 3000);