Question

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

我对React很陌生，正在看一下文档＆amp; ＆＃34;井字棋＆＃34;指南。我修改了指南中的代码，我希望在找到游戏获胜者3秒后将状态重置为初始值。

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

是否有可能在做出反应或为了重构我的应用程序/组件架构时实现这样的目标？

下面有＆＃39;我的例子：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);

Answer 2

首先，setTimeout第一个参数需要是一个函数，所以你要编写

change

其次，由于您在渲染函数中计算胜利者，您将添加另一个状态变量以跟踪倒计时，然后触发渲染倒计时，如

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

和倒计时看起来像

const winner = calculateWinner(this.state.squares);
let status;
if(winner && !this.state.isCounting) {
  this.countDown();
}

<强> Working demo

Answer 3

到目前为止，我已经有两种方法可以做到这一点。

更改倒计时功能以绑定到（this），然后在包含html和计时器的if（winner）语句中返回。

countDown() {
setTimeout(function() { this.setState({
  squares: Array(9).fill(null),
  xIsNext: true,
// old = }), 3000);
}); }.bind(this), 3000);  }

我改变了if胜利者。

if (winner) {
  status = 'Winner: ' + winner;
  // Old code doesn't contain a return here.
  return (
    <div>
      <div className="status">{status}</div>
      <div className="board-row">
        {this.renderSquare(0)}
        {this.renderSquare(1)}
        {this.renderSquare(2)}
      </div>
      <div className="board-row">
        {this.renderSquare(3)}
        {this.renderSquare(4)}
        {this.renderSquare(5)}
      </div>
      <div style={{ marginBottom: 30 }} className="board-row">
        {this.renderSquare(6)}
        {this.renderSquare(7)}
        {this.renderSquare(8)}
      </div>
      <Button id="reset" onClick={this.reset}>Reset</Button>
  // Call counDown(this) after the button.
      {this.countDown(this)}
    </div>
  )
} else {
  status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
}

我能够让它工作的另一种方法是在if（winner）中添加setTimeout（）

if (winner) {
  status = "Winner: " + winner;
  // Just add setTimeout() and it will reset after 3 seconds.
  setTimeout(() => {
   this.setState({
      squares: Array(9).fill(null),
      xIsNext: true});
  }, 3000);
} else {
  status = "Next player: " + (this.state.xIsNext ? "X" : "O");
}

这是EXAMPLE

我一直在玩倒数计时器来显示，如果我以后再完成它会添加它。

React中的SetTimeout

3 个答案: