React 组件正在重新渲染从状态中移除的项目

Question

这个很难解释，所以我会尽力的！

我的目标

我一直在学习 React，并决定尝试从头开始构建一个 Todo List App。我想实现一个“推送通知”系统，当您说将待办事项标记为完成时，它会在左下角弹出，例如“遛狗已更新”。然后在几秒钟左右后，它将从 UI.

中删除

相当简单的目标，在大多数情况下我已经实现了它...但是...如果您快速将一些待办事项标记为已完成，它们将从UI 然后重新渲染回来！

我已经尝试了尽可能多的不同方法来从状态中删除项目，甚至更改组件的拉入位置等。

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

这是代码沙箱的 link，这是我能想到的显示我所在位置的最佳方式：

警报组件State/Parent

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

非常感谢任何帮助！

Answer 1

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

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

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

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

Answer 2

当您调用设置函数来更新状态时，它将从上次呈现的值开始更新。如果你想让它从上次设置的值更新，你需要传递更新函数而不是只传递新值。

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

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

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

Answer 3

在PageContainer.js中修改这个函数

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

至此

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

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

React 组件正在重新渲染从状态中移除的项目

React component is re-rendering items removed from state

javascript

reactjs

react-component

react-state

我的目标

警报组件State/Parent

警报组件