在指定时间后修改 React 状态变量

Question

我想在指定的时间后从数组中删除一些条目。 notifications应立即更改，但实际上保持不变。有没有办法实现我的目标？

const Notifications = props => {
  const [notifications, setNotifications] = useState([
    { value: '123', time: Date.now() },
    { value: '456', time: Date.now() }
  ]);
  useEffect(() => {
    let interval = setInterval(() => {
      console.log(notifications);
      let time = Date.now();
      let array = notifications.filter(function(item) {
        return time < item.time + 0;
      });
      setNotifications(array);
    }, 500);
    return () => {
      clearInterval(interval);
    };
  }, []);
  return null
}

Answer 1

你的代码很好！ 问题在于您记录它的位置。

所有状态更新都是异步的。使用钩子，更新的值仅在下一次render调用中在组件范围内公开。如果您在效果之外登录，您应该会看到正确的值

const Notifications = props => {
  const [notifications, setNotifications] = useState([
    { value: '123', time: Date.now() },
    { value: '456', time: Date.now() }
  ]);
  useEffect(() => {
    let interval = setInterval(() => {
      let time = Date.now();
      let array = notifications.filter(function(item) {
        return time < item.time + 0;
      });
      setNotifications(array);
    }, 500);
    return () => {
      clearInterval(interval);
    };
  }, []);
  return null
}
console.log(notifications);