React 可堆叠小吃店/吐司答案

【问题标题】：React stackable snackbars/toastsReact 可堆叠小吃店/吐司
【发布时间】：2026-01-25 20:25:02
【问题描述】：

我正在创建自己的简单小吃店/吐司堆垛机。但是，我在有序地排队时遇到了问题。从snackbar que 中删除snackbar 会导致重新渲染和奇怪的行为。

基本流程：单击一个按钮，该按钮会触发 addSnack 函数，该函数由 withSnackbar HOC 提供。

从触发函数中获取参数，并相应地创建一个零食并将其添加到零食栏列表中。

最后，我们渲染小吃店列表。

每个小吃店都控制自己的出现和消失，并由超时控制。超时触发后，它调用 removeSnack 函数，该函数假设从列表中删除第一个零食。

codesandbox

例如，如果您在短时间内单击该按钮四次。它们渲染得很好，但是当第一个要删除时，它们都消失并异常重新出现。

我知道这部分是状态重新渲染错误，但是，我不确定如何以优雅地处理删除而不影响其他零食的渲染的方式处理它。

【问题讨论】：

标签： reactjs react-hooks snackbar

【解决方案1】：

因此，经过数小时的反复试验，我找到了一个迄今为止有效的解决方案。在州外移动和阅读零食有助于解决奇怪的渲染问题，并且通过它，我能够创建一个运行良好的消息队列。

工作示例 Codesandbox

【讨论】：

【解决方案2】：

如果您查看splice 文档，您会注意到它返回的是已删除元素的数组，而不是初始数组。

您可以通过拼接然后更新来纠正它：

snacks.splice(-1, 1);
addSnacks(snacks);

但是，您仍然会有一些奇怪的行为，您可能需要使用 keyed list 来解决此问题。

【讨论】：

【解决方案3】：

我有同样的问题，我看到了你的解决方案，但我真的想找出它发生的原因 - 这就是原因：

当你从异步函数的回调中调用 useState 钩子时，你应该使用钩子的回调格式来确保你使用的是最新的值。示例：

const [messages, setMessages] = useState([]);

const addMessage = ( message ) => {
  setMessages( prevMessages => {//prevMessages will be the latest value of messages
    return [ ...prevMessages, message ];
  });
};

const removeMessage = ( index ) => {
  setMessages( prevMessages => {//prevMessages will be the latest value of messages
    let newMessages = [...prevMessages];
    newMessages.splice( index, 1 );
    return newMessages;
  });
};

【讨论】：