React Native从Firestore文档渲染数据时触发无限循环问题

问题根源 #

你在组件渲染阶段的map循环里直接调用异步函数获取数据并更新state，每次setExerciseData都会触发组件重新渲染，重新渲染又会再次执行map里的getData，导致无限循环。而且单个exerciseData state会被所有exercise数据覆盖，无法正确保存每个exercise的独立数据。

解决方案1：批量获取所有exercise数据（推荐） #

使用useEffect批量获取所有exercise的数据，存储到一个以文档ID为键的对象中，避免重复请求和state覆盖：

import { useState, useEffect } from 'react';
import { getDoc } from 'firebase/firestore';

// 组件内部
const [exerciseDataMap, setExerciseDataMap] = useState({});

useEffect(() => {
  // 批量获取所有exercise数据
  const fetchAllExercises = async () => {
    const dataMap = {};
    for (const exerciseRef of workout.exercises) {
      const docSnap = await getDoc(exerciseRef);
      if (docSnap.exists()) {
        dataMap[exerciseRef.id] = docSnap.data();
      }
    }
    setExerciseDataMap(dataMap);
  };

  // 只有当exercises数组存在且有内容时才执行
  if (workout?.exercises?.length) {
    fetchAllExercises();
  }
}, [workout.exercises]); // 依赖数组：仅当exercises变化时重新获取

// 渲染部分
{workout.exercises.map((exercise) => {
  const exerciseData = exerciseDataMap[exercise.id];
  // 用可选链避免数据未加载时的报错
  return <Text key={exercise.id}>{exerciseData?.name}</Text>;
})}

解决方案2：自定义Hook获取单个exercise数据 #

如果需要单独处理每个exercise的获取逻辑，可以封装一个自定义Hook：

import { useState, useEffect } from 'react';
import { getDoc } from 'firebase/firestore';

function useExercise(exerciseRef) {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const docSnap = await getDoc(exerciseRef);
      if (docSnap.exists()) {
        setData(docSnap.data());
      }
    };

    fetchData();
  }, [exerciseRef]);

  return data;
}

// 组件内渲染部分
{workout.exercises.map((exercise) => {
  const exerciseData = useExercise(exercise);
  return <Text key={exercise.id}>{exerciseData?.name}</Text>;
})}

关键注意点 #

• 永远不要在渲染阶段直接调用setState，这会触发无限渲染循环。
• 使用useEffect控制异步数据获取的时机，依赖数组要准确，避免不必要的重复请求。
• 用对象或数组存储多个数据，避免单个state被覆盖。
• 渲染时使用可选链（?.）处理数据未加载完成的状态，防止报错。

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