React 组件正在重新渲染从 state 中删除的项目

Question

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

我的目标

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

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

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

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

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

警报组件状态/父级

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

当您调用集合 function 来更新 state 时，它将从最后渲染的值更新。 如果您希望它从上次设置的值更新，您需要传递更新 function 而不仅仅是新值。

例如，您可以将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

Answer 2

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

更新值列表时，使用接收之前 state 的更新方法，例如

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

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

Answer 3

在PageContainer.js中，修改这个 function

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

对此

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

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