在循环中使用 setState答案

【问题标题】：Use setState in a loop在循环中使用 setState
【发布时间】：2021-07-24 01:16:36
【问题描述】：

在更新状态时，react hook useState 的工作方式与 setState 类似。这意味着异步操作。我的项目倾向于以 2 秒的超时时间更新状态。

如果我有一个包含 3 个值的数组，并且我想创建一个循环并每 2 秒更改一次状态，但该操作只是像异步函数一样采用最后一个状态。

有什么想法吗？

  for (let i=0; i<arr.length; i++) {
            setTimeout(() => setStr(arr[i]), 2000);
        }

【问题讨论】：

我的意思是..您在 2 秒后同时进行所有三个更改。它们很可能会被分组到同一个渲染中。
这在 React 中实际上是一件棘手的事情，但绝对有可能。我会首先查看其他人是如何制作 useInterval 和 useTimeout 挂钩的。你需要像usehooks-typescript.com/react-hook/use-interval 这样的东西，但可以设置限制。

标签： reactjs asynchronous state

【解决方案1】：

为了给出一些想法，您需要一个setInterval，每次调用它时都会使用数组中的下一项，如下所示：

const current = 0;
const interval = setInterval(() => {
  if (current === arr.length - 1) {
    clearInterval(interval);
  }
  setStr(arr[current])
  current++;
}, 2000);

当然，您需要将其作为效果运行，将变量保存在 ref 中，在卸载时清除间隔等。

【讨论】：

【解决方案2】：

所以我自己找到了答案。通过实例化 Promise 类来创建 Promise。然后使用 set timout 创建一个函数并解析 setState 函数。从其他函数调用它并循环进入。

【讨论】：