React 组件正在重新渲染从状态中删除的项目 警报组件状态/父级警报组件

如何解决React 组件正在重新渲染从状态中删除的项目 警报组件状态/父级警报组件

这很难解释，所以我会尽力而为！

我的目标

我一直在学习 React 并决定尝试从头开始构建一个待办事项列表应用程序。我想实现一个“推送通知”系统，当你说将待办事项标记为完成时，它会在左下角弹出，例如“遛狗已更新”。几秒钟后，它将从用户界面中删除。

相当简单的目标，在大多数情况下我已经让它工作了...但是...如果你快速将一些待办事项标记为完成，它们将从用户界面中删除，然后得到重新渲染回来！

我尝试了尽可能多的从状态中删除项目的方法，甚至改变了组件被拉入的位置等。

这可能是一个菜鸟问题，但我仍在学习！

这是一个代码沙箱的链接，我能想到的最好的方式来显示我的位置：

警报组件状态/父级

https://codesandbox.io/s/runtime-night-h4czf?file=/src/components/layout/PageContainer.js

警报组件

https://codesandbox.io/s/runtime-night-h4czf?file=/src/components/parts/Alert.js

非常感谢任何帮助！

解决方法

当您调用 set 函数来更新状态时，它将从上次渲染的值开始更新。如果您希望它从上次设置的值更新，则需要传递更新函数，而不仅仅是新值。

例如，您可以将 setTodos 函数中的 markComplete 更改为类似这样的内容。

           setTodos(todos => todos.map((todo) => {
                if (id === todo.id) {
                    todo = {
                        ...todo,complete: !todo.complete,};
                }
                return todo;
            }));

https://codesandbox.io/s/jovial-yalow-yd0jz

,

如果发生异步事件，则执行的事件处理程序范围内的值可能已过期。

更新值列表时，使用接收先前状态的更新方法，例如

setAlerts(previousAlerts => {
  const newAlerts = (build new alerts from prev alerts);
  return newAlerts;
});

而不是直接使用您从 alerts 获得的 useState。

,

在PageContainer.js中，修改这个函数

const removeAlert = (id) => {
  setAlerts(alerts.filter((alert) => alert.id !== id));
};

到这里

const removeAlert = (id) => {
  setAlerts(prev => prev.filter((alert) => alert.id !== id));
};

这也将解决高速取消选中已完成的待办事项时的问题