useEffect with setTimeout/setInterval 关闭警报

Question

我试图在一段时间后关闭每个警报，但是当我尝试在 useEffect 中调用 setTimeout/Interval 时，我的警报没有正确显示或关闭。就目前而言，总是有一个警报没有被解除，因为所有警报都没有持续更新。在 useEffect 停止更新后，如何将 setTimeout 或 setInterval 添加到运行我的 checkAlertTimes 函数？

const [filteredAlerts, setFilteredAlerts] = useState()
const checkAlertTimes = () => {
    const currentTime = new Date().getTime()
    setFilteredAlerts(alertsToday.filter(alert => {
      const alertTime = alert.date.getTime()
      const secondsPassed = (currentTime - alertTime) /1000
      if (secondsPassed < 30){return alert}
    }))
  }

  useEffect(() => {
      checkAlertTimes()
  },[allAlerts])

  return (
    <div>{//map through and show alerts}</div>
  )

Answer 1

据我所知，您需要这样的东西：

const [filteredAlerts, setFilteredAlerts] = useState();
const checkAlertTimes = () => {
  const currentTime = new Date().getTime();
  setFilteredAlerts(
    alertsToday.filter((alert) => {
      const alertTime = alert.date.getTime();
      const secondsPassed = (currentTime - alertTime) / 1000;
      if (secondsPassed < 30) {
        return alert;
      }
    })
  );
};

useEffect(() => {
  const interval = setInterval(() => {
    checkAlertTimes();
  }, 1000);
  return () => clearInterval(interval);
}, [allAlerts, alertsToday]);

return (
  <div>
    {
      //map through and show alerts
    }
  </div>
);

useEffect with setTimeout/setInterval 关闭警报

useEffect with setTimeout/setInterval to dismiss alerts

settimeout

setinterval

reactjs

react-hooks

use-effect