javascript - 在单个函数中设置状态两次 - ReactJS

Question

我有一个设置状态两次的函数，但是 - 第二次 setState 必须在第一次 setState 发生后 500 毫秒后发生(动画目的)。

代码如下:

const showAnimation = () => {
   this.setState({ hidden: false });

   setTimeout(() => {
      this.setState({ hidden: true });
   }, 500);
};

但是 - 如果我这样做，React 会以某种方式将这两个 setState 合并为一个，并且我的动画无法按预期工作。

但是，如果我使用 hack:

const showAnimation = () => {
   setTimeout(() => {
      this.setState({ hidden: false });
   }, 0);  // ------------------------------> timeout 0

   setTimeout(() => {
      this.setState({ hidden: true });
   }, 500);
};

它按预期工作。但我仍然不太喜欢它，而且我担心它可能是某种黑客行为。对于这样的情况有没有更好的解决方案呢？谢谢:)

Answer 1

由于 setState 在 React 中是异步的，您可能不会立即获得更新的状态，但 setState 会在 setState 中为您提供 prevState 参数code> 函数来获取最后更新的状态，这样你就不会合并状态

在您的情况下，语法如下

this.setState((prevState) => { hidden: false }, () => {
      setTimeout(() => {
        this.setState({ hidden: !prevState.hidden });
      }, 500);
    });

只需使用 prevState 将您的值更新为更新后的状态

如果我正确理解你的问题，这应该可以正常工作
如果需要更多说明，请告诉我