javascript - 如何仅在使用 React 将某些内容添加到数组时才运行 useEffect？

Question

我有一个存储在状态中的警报列表:

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

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

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

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

Answer 1

不使用效果:

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

const handleAddAlert = (alert) => {
   setTimeout(() => setAlerts(alerts.filter(a => a !== alert)),3000);
   setAlerts([...alerts,alert]);
}


// instead of calling `setAlerts` in your code down here, call `handleAddAlert` with the alert