当使用React将某些东西添加到数组时，如何只运行useEffect？

Question

我有一个状态存储的警报列表：

const [alerts, setAlerts] = useState([]);

我将所有错误和通知推送到此列表，然后将其显示在警报框中。我想要的是在3000ms之后自动弹出添加的警报。这是我要做的：

useEffect(() => {
  setTimeout(() => {
    setAlerts([...alerts].splice(0, 1));
  }, 3000);
}, [alerts]);

但是我得到的是一个无限循环，因为即使我从该警报中删除了它，它也会发生变化。所以我想我只需要在将某些内容添加到Alerts数组时触发上面的代码。有什么想法吗？

Answer 1

使用依赖数组中的数组长度。

useEffect(() => {
  setTimeout(() => {
    setAlerts([...alerts].splice(0, 1));
  }, 3000);
}, [alerts.length]);