Question

反应16.8（使用类而不是钩子）

在名为if的函数中考虑以下onClick语句

 if (this.state.opponentIsDead) {
    this.setState({
      disableAttack: 'disabled',
    }, () => {
      this.timer = setTimeout(() => {
        this.props.postFightData({
          train_exp: 100,
          drop_chance: this.state.monster.drop_chance,
          gold_rush_chance: this.state.monster.gold_rush_chance,
          gold_drop: this.state.monster.gold_drop,
        });
      }, 1000);
    });
  }

我想做的是，如果您赢得了比赛，请等待一秒钟再发布比赛数据，否则超时将起作用。但是如您所见，我正在更新状态以禁用按钮。

我当时想做的就是将超时移到componentDidUpdate方法上，那样我就可以重新呈现组件，并且按钮将被禁用，我觉得这是错误的方法。 / p>

我了解您可以将setState包装在异步函数中，但我也想知道这是否是最好的方法。

目标是禁用按钮，然后等待1秒钟并发布数据。最好的方法是什么？

这种方法有什么问题？

对于那些可能不知道的人，将调用setState来更新状态，但是与其重新渲染它，而是调用回调函数，而不是重新呈现它，因此在计时器递减计数时不会禁用该按钮。 / p>

它将在计时器之后（而不是之前）被禁用，而在我希望的位置之前而不是之后被禁用。

Answer 1

我怀疑其他原因导致了您的问题。这段代码似乎可以按照您想要的方式工作（否则我会误会）。

https://codesandbox.io/s/8nz508y96j-单击按钮将禁用按钮，并在3秒后显示发布警报

尽管推荐使用componentDidUpdate。

https://reactjs.org/docs/react-component.html#setstate

setState（）的第二个参数是可选的回调函数，将在setState完成并重新呈现组件后执行。通常，我们建议将componentDidUpdate（）用于此类逻辑。

Answer 2

这应该做到。

if (this.state.opponentIsDead) {
  this.setState({
    disableAttack: 'disabled',
  });

  window.requestAnimationFrame(() => {
    this.timer = setTimeout(() => {
      this.props.postFightData({
        train_exp: 100,
        drop_chance: this.state.monster.drop_chance,
        gold_rush_chance: this.state.monster.gold_rush_chance,
        gold_drop: this.state.monster.gold_drop,
      });
    }, 1000);
  });
}

设置状态为react后如何等待

这种方法有什么问题？

2 个答案: