如何为Snackbar消息列表正确处理setTimeout？

背景 #

开发了一个错误展示用的Snackbar组件，接收字符串类型的错误参数并保存到列表，在右上角展示。每条消息需在7秒后自动消失，也可通过点击关闭按钮手动关闭。

问题 #

当先后展示两条消息时，7秒后两条消息会短暂消失，随后其中一条立即重新出现，且不再自动消失，只能手动关闭。所有消息组合均出现该错误。

预期行为 #

第一条消息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]);

  // 省略Tailwind样式的return部分，仅通过.map遍历messages渲染每条消息
}

代码思路 #

• handleClickClose：过滤掉指定消息，逻辑正常。
• 消息添加逻辑：判断newMessage非空且不是列表最后一条消息时，将其加入列表，并设置7秒后调用handleClickClose移除该消息。
• useEffect：意图在messages变化时触发重渲染。

问题根源 #

1. 渲染流程中直接更新状态：在组件函数体中直接判断newMessage并调用setMessages，会导致每次渲染都可能触发状态更新，引发额外渲染，且setTimeout捕获的是旧的messages状态闭包。
2. 闭包陷阱：setTimeout中的handleClickClose引用的是当时渲染周期的messages数组，后续消息添加后，旧定时器执行时会基于旧数组过滤，导致状态更新异常。
3. useEffect无实际作用：当前useEffect内部为空，未起到监听状态变化的作用，反而可能引发不必要的渲染。

修复方案 #

方案1：用useEffect处理新消息+函数式状态更新 #

将消息添加逻辑移到useEffect中，避免渲染中直接更新状态，同时用函数式更新规避闭包问题：

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

  // 函数式更新确保获取最新状态
  const handleClickClose = (messageToRemove: string) => {
    setMessages(prevMessages => prevMessages.filter(message => message !== messageToRemove));
  };

  useEffect(() => {
    if (newMessage === '') return;
    
    setMessages(prevMessages => {
      // 避免连续重复消息
      if (prevMessages.length > 0 && prevMessages[prevMessages.length - 1] === newMessage) {
        return prevMessages;
      }
      const updatedMessages = [...prevMessages, newMessage];
      // 设置7秒后移除当前消息的定时器
      setTimeout(() => handleClickClose(newMessage), 7000);
      return updatedMessages;
    });
  }, [newMessage]);

  // 省略return部分
}

方案2：为每个消息绑定独立定时器（更严谨） #

用useRef存储每个消息的定时器ID，精准管理定时器生命周期：

import { useState, useEffect, useRef } from 'react';

const Snackbar = ({ newMessage }: { newMessage: string }) => {
  const [messages, setMessages] = useState<string[]>([]);
  // 存储消息与对应定时器的映射
  const timersRef = useRef<Map<string, NodeJS.Timeout>>(new Map());

  const handleClickClose = (messageToRemove: string) => {
    // 清除对应消息的定时器
    if (timersRef.current.has(messageToRemove)) {
      clearTimeout(timersRef.current.get(messageToRemove)!);
      timersRef.current.delete(messageToRemove);
    }
    // 函数式更新获取最新状态
    setMessages(prev => prev.filter(msg => msg !== messageToRemove));
  };

  useEffect(() => {
    if (!newMessage) return;

    setMessages(prev => {
      if (prev[prev.length - 1] === newMessage) return prev;
      
      const newMessages = [...prev, newMessage];
      // 存储当前消息的定时器ID
      const timer = setTimeout(() => handleClickClose(newMessage), 7000);
      timersRef.current.set(newMessage, timer);
      return newMessages;
    });

    // 组件卸载时清理所有定时器
    return () => {
      timersRef.current.forEach(timer => clearTimeout(timer));
      timersRef.current.clear();
    };
  }, [newMessage]);

  // 省略return部分
}

关键优化点 #

• 函数式状态更新：使用setMessages(prev => ...)确保每次状态更新基于最新值，避免闭包导致的旧状态引用。
• 副作用规范化：将消息添加、定时器设置放在useEffect中，符合React副作用处理规范，避免渲染流程中直接更新状态的异常。
• 定时器精准管理：为每个消息绑定独立定时器，清理时精准移除，避免内存泄漏和逻辑冲突。

内容的提问来源于stack exchange，提问作者Fred