React Native中正确提取Firestore查询数据存入组件状态的方法

出现数据重复累加、数组长度异常增长的核心原因有两个：

• 数据查询逻辑直接写在组件渲染函数的顶层作用域，没有做执行时机限制。每次组件重渲染都会重新触发查询，查询完成后更新状态又会触发新一轮重渲染，形成无限执行的死循环
• 遍历查询结果时逐次调用setDbData追加数据，每次调用时闭包捕获的都是旧的状态值，加上React的状态更新批量合并机制，再叠加死循环的重复查询，最终导致相同数据被反复插入数组

直接把副作用逻辑收敛到useEffect中，查询完成后先组装好完整结果数组，再一次性更新状态，参考代码如下：

import { useState, useEffect } from 'react';
import { View, Text } from 'react-native';
import { collection, query, where, getDocs } from 'firebase/firestore';
// 替换为你项目中实际的Firestore实例导入路径
import { db } from './firebase/config';

export default function MaleUserList() {
  const [dbData, setDbData] = useState([]);
  const [loading, setLoading] = useState(true);

  // 副作用逻辑放入useEffect，通过依赖数组控制执行时机
  useEffect(() => {
    const fetchFilteredData = async () => {
      try {
        // 构造isMale为true的筛选查询
        const q = query(collection(db, "userData"), where("isMale", "==", true));
        const querySnapshot = await getDocs(q);
        // 先一次性遍历组装完整结果数组，不在循环内调用状态更新
        const resultArr = [];
        querySnapshot.forEach((doc) => {
          resultArr.push({
            id: doc.id,
            ...doc.data()
          });
        });
        // 单次调用状态更新，直接替换为完整结果数组
        setDbData(resultArr);
      } catch (error) {
        console.error("数据查询失败:", error);
      } finally {
        setLoading(false);
      }
    };

    fetchFilteredData();
  }, []); // 空依赖数组，保证逻辑仅在组件首次挂载时执行1次

  if (loading) return <Text>数据加载中...</Text>;

  return (
    <View>
      {dbData.map(user => (
        <Text key={user.id}>{user.userName}</Text>
      ))}
    </View>
  );
}

• 所有数据请求、订阅类的副作用逻辑，必须放在useEffect中，禁止直接写在组件顶层作用域，避免随重渲染反复触发
• 批量数据更新时，不要在循环中逐次调用状态更新方法，先遍历处理完所有数据得到完整目标数组，再单次调用状态更新方法完成赋值，既能避免闭包导致的旧状态问题，也能减少不必要的重渲染
• 处理Firestore文档快照时，记得把文档id合并到返回的数据对象中，后续渲染列表时可以直接作为组件key使用，避免列表渲染异常

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