如何处理项目列表的 setTimeout() ？

Question

我尝试了一段时间用GPT寻找解决方案，但没有得到好的结果。

基础： 我建立了一个小吃店来显示错误。这将错误作为字符串参数并将其保存在列表中。然后该列表将显示在右上角。每条消息都会在 7 秒后或按下关闭按钮时消失。

问题： （以下描述是针对应依次显示的两条消息，但所有可能的组合都会出现错误） 七秒后，两条消息都会短暂消失，一条消息会立即重新出现，然后没有时间限制地保持，直到使用按钮将其关闭。

预期行为： 第一条消息应在 7 秒后消失，不久后的第二条消息（因为它也稍后显示）也应消失。通过按钮关闭应该仍然是可能的。

关闭按钮到目前为止一直有效，没有任何问题。

代码：

  const Snackbar = ({ newMessage }: { newMessage: string }) => {
  const [messages, setMessages] = useState<string[]>([]);

  const handleClickClose = (messageToRemove: string) => {
    setMessages(messages.filter((message) => message !== messageToRemove));
  };

  if (newMessage !== '') {
     if (newMessage !== messages[messages.length - 1]) {
        setMessages([...messages, newMessage]);
        setTimeout(handleClickClose, 7000, newMessage);
     }
  }

  useEffect(() => {}, [messages]);

我省略了带有顺风样式的整个返回语句，我认为它不相关，它只是使用 .map 迭代消息列表并对各个消息进行一些样式

我的代码背后的想法： handleClickClose 函数应该是可以理解的并且可以工作。

之后的想法是 -> 我检查新消息是否已填充 -> 新消息是否还不是列表中的最后一条，以便同一条消息不会连续显示两次。 -> 如果不是这种情况，我会将消息添加到列表中并设置计时器，以便它在 7 秒后使用此新消息调用 handleCloseClick 函数。

useEffect 应确保当 setTimeout 函数或关闭按钮更改列表时，重新加载组件

感谢您提前的帮助

Answer 1

当您设置超时关闭小吃栏时，函数将在 7 秒后运行，并使用调用函数时保存的数据。 您应该将代码更改为：

const Snackbar = ({ newMessage }: { newMessage: string }) => {
    const [messages, setMessages] = useState<string[]>([]);
    const [messageToRemove, setMessageToRemove] = useState<string>('');

const handleClickClose = (message: string) => {
    setMessageToRemove(message);
};

useEffect(() => {
    if (newMessage !== '') {
        if (newMessage !== messages[messages.length - 1]) {
            setMessages([...messages, newMessage]);
            setTimeout(handleClickClose, 7000, newMessage);
        }
    }
}, [newMessage])

useEffect(() => {
    setMessages(messages.filter((message) => message !== messageToRemove));
}, [messageToRemove]);

return ();
}