React每次重渲染时state存储输出重复值如何解决

• 你使用了Firebase的onSnapshot实时监听器但未配置清理逻辑，组件卸载、重新挂载时会重复注册监听器，多个监听器同时触发state更新引发数据重复
• useEffect依赖数组为空，没有把动态参数userId加入依赖，userId变化时无法正确拉取对应新用户的数据，也可能导致旧数据残留叠加
• React18开发环境的严格模式会默认触发两次组件挂载流程，未清理监听器的场景下会直接注册两个有效监听器，加倍放大重复问题

1. 新增监听器清理逻辑+补全依赖数组 #

onSnapshot调用后会返回一个取消监听的函数，你需要在useEffect的清理回调中调用该函数，避免监听器重复注册，同时把userId补入依赖数组保证数据逻辑正确：

const [calendarList, setCalendarList] = useState([]);

useEffect(() => {
    // 接收取消监听的方法
    const unsubscribe = db.collection("users")
      .doc(userId)
      .collection("calendars")
      .onSnapshot((snapshot) => {
        const calendarArray = [];
        snapshot.forEach((doc) => {
          // 建议携带文档唯一id，方便后续操作和去重
          calendarArray.push({...doc.data(), id: doc.id});
        });
        setCalendarList(calendarArray);
      });
    // 组件卸载/依赖变化时清理旧监听器
    return () => unsubscribe();
}, [userId]); // 补全userId到依赖数组

2. 增加去重逻辑兜底 #

如果清理监听器后仍有偶发重复，可以基于Firebase文档唯一id做去重兜底，从根源避免重复数据进入state：

useEffect(() => {
    const unsubscribe = db.collection("users")
      .doc(userId)
      .collection("calendars")
      .onSnapshot((snapshot) => {
        const calendarMap = new Map();
        snapshot.forEach((doc) => {
          // 以文档id为key自动去重，新数据自动覆盖旧数据
          calendarMap.set(doc.id, {...doc.data(), id: doc.id});
        });
        setCalendarList(Array.from(calendarMap.values()));
      });
    return () => unsubscribe();
}, [userId]);

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