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

我有一种情况，我需要在用户的操作（比如单击）上输出一定数量的元素，每个元素都必须在前一个元素之后500毫秒出现。 元素数组存储在状态中，新元素添加在setInterval中，setInterval在useffect钩子中运行

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

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

---

我在codesandbox上创建了一个简单的问题示例：

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

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

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

---

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

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

useffect（（）=>{
让我看看你的身份证；
如果（isCounting&&numbers.length<10）{
id=setTimeout（（）=>setNumbers（[…numbers，Math.random（）]），500）；
}
return（）=>clearTimeout（id）；
}，[统计，数字]；

这样，每次重新渲染时都会运行useEffect，因为数组总是不相等的。如果我们有一个更复杂的检查，在每次重新渲染时运行它可能会很昂贵。这是可行的，但我不认为这就是我们要用的钩子，因为数组总是不相等的，所以每次重新渲染时都会使用useEffect。是的，这就是我想要做的。我希望它每次都创建一个新的设置超时，这意味着每次都要运行效果。只有当长度达到10时，它才会停止更改，从而停止运行效果

我不认为这就是我们要使用的钩子

如果这不能满足您的需求，那就好了。但我认为每次运行效果都是使用效果挂钩的方式。跳过它们是一种优化。