是否有可能在useEffect钩子中运行的间隔内获取存储在状态中的数组的当前长度？

Question

我有一种情况，我需要在用户的动作上输出一定数量的元素（比如说点击），每个元素必须出现在前一个元素后500ms。元素数组存储在状态内，新元素添加在setInterval里面，运行在useEffect钩子里面。

这是问题：在钩子和间隔内部我没有访问数组的长度，并且它不能作为依赖项传递，因为它会导致无限循环。但是我必须在已经显示一定数量的元素后停止间隔。

我通过在钩子中保持setInterval迭代找到了解决问题的方法。我想知道这是否正确或是否有更好/更惯用的方法。

我在codesandbox上创建了一个简单的问题示例：https://codesandbox.io/s/xo879wn08z

Answer 1

您可以清除状态更新程序回调中的间隔，您可以在其中访问数字数组

setNumbers(numbers => {
    if (numbers.length === 9) {
      clearInterval(interval);
    }

    return [...numbers, Math.random()]
 });

Working demo

Answer 2

如何使用setTimeout而不是使用setInterval。您每次都会创建一个新的超时，但前提是长度小于10。

  useEffect(() => {
    let id;
    if (isCounting && numbers.length < 10) {
      id = setTimeout(() => setNumbers([...numbers, Math.random()]), 500);
    }
    return () => clearTimeout(id);
  }, [isCounting, numbers]);