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

【问题标题】：React component is re-rendering items removed from stateReact 组件正在重新渲染从状态中删除的项目
【发布时间】：2021-01-09 03:13:13
【问题描述】：

这是一个很难解释的问题，所以我会尽力而为！

我的目标

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

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

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

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

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

警报组件状态/父项

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

非常感谢任何帮助！

【问题讨论】：

标签： javascript reactjs react-component react-state

【解决方案1】：

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

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

【讨论】：

谢谢！同样，我不知道 useState 设置器可以接受一个函数。

【解决方案2】：

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

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

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

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

【讨论】：

与 Ray Chans 的回答类似，除了这准确地解释了他的回答为什么有效 - 这真的很有帮助，因为我正在摸不着头脑！那么当你将一个函数传递给 useState setter 函数时，它总是使用之前的状态吗？
确实，你必须使用传递的值，也就是之前的状态。我将在我的答案中更新变量名。

【解决方案3】：

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

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

到这里

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

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

【讨论】：