useEffect无法感知state更新 导致添加用户数组时出现重复元素

• 循环变量指代完全错误：代码中遍历dbUsers快照集合时，回调参数定义了filteredUser，但后续判断文档存在性、取文档ID、读取文档数据时，全部使用了外层的集合对象dbUsers，没有使用当前遍历到的文档实例，循环逻辑实质空转。
• Effect依赖触发无限循环：将users作为useEffect的依赖项，一旦users状态更新，就会自动重新执行effect拉取全量Firebase数据，再次触发状态更新，形成死循环。
• 状态更新时机错误：在循环过程中反复调用setUsers做元素追加，循环内的存在性判断使用的是effect闭包捕获的旧版users值，无法感知同一次循环中前面刚追加到数组的元素，自然会出现重复添加的问题。

• 调整effect依赖：去掉依赖数组中的users，让拉取数据的逻辑只在组件挂载时执行一次，从根源上切断无限循环路径。
• 批量预处理拉取到的数据：遍历Firebase快照集合时，正确读取每个文档实例的内容，把有效文档统一转成ContactsList实例，收集成临时数组，不要在遍历过程中直接操作state。
• 一次性提交去重后的状态更新：调用单次setUsers，基于React提供的最新prevState做去重比对，把临时数组中不存在的用户合并到原有列表中，全程不需要读取闭包中的旧state值。

import React, {useState, useEffect} from 'react';
import {View, FlatList} from 'react-native';

// 提前定义好的ContactsList类
class ContactsList {
  constructor(id, name, number, avatar, onesignalId) {
    this.key = id;
    this.name = name;
    this.number = number;
    this.profileAvtar = avatar;
    this.onesignalId = onesignalId;
  }
}

const Users = props => {
const [users, setUsers] = useState([]);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  (async () => {
    try {
      const dbSnapshot = await db.collection('users').get();
      // 遍历快照集合收集有效用户实例
      const fetchedUsers = [];
      dbSnapshot.forEach(docSnapshot => {
        if (docSnapshot.exists) {
          fetchedUsers.push(
            new ContactsList(
              docSnapshot.id,
              docSnapshot.data().name,
              docSnapshot.data().number,
              docSnapshot.data().profileAvtar,
              docSnapshot.data().onesignalId,
            )
          )
        }
      })

      // 基于最新的state批量去重，一次性完成数组合并
      setUsers(prevUsers => {
        // 用Set存储已有的用户key，提升比对效率
        const existingUserKeys = new Set(prevUsers.map(item => item.key));
        const validNewUsers = fetchedUsers.filter(user => !existingUserKeys.has(user.key));
        return [...prevUsers, ...validNewUsers];
      })
      setIsLoading(false);
    } catch (err) {
      setIsLoading(false);
      // 补充错误处理逻辑
    }
  })();
}, []);

• 这种先批量收集数据、再单次更新state的写法，既避免了循环内多次setState导致的重复渲染，也从逻辑上解决了旧state感知不到同批次新增元素的去重失效问题。
• 若后续需要主动触发重新拉取用户数据，可以单独维护一个refreshFlag状态，把这个状态作为effect的依赖项，不要直接依赖users本身，避免触发无意义的循环执行。

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