如何在FlatList的异步方法中正确返回React组件？

错误原因 #

_renderSomething是异步函数，调用它会返回一个Promise对象（错误提示里的{_U, _V, _W, _X}就是Promise的内部状态标识）。而React要求渲染的必须是合法的React元素，不能直接渲染Promise对象，这就是报错的核心原因。

解决方案 #

方案1：用自定义Hook处理单个项的异步数据加载 #

把异步获取数据的逻辑封装成自定义Hook，在每个子组件里独立管理加载状态、数据和错误：

// 自定义Hook：处理单条数据的异步获取
const useItemData = (id) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // 修正条件判断：用===而不是=
        const result = await database.get(SOME_TABLE).Where(someColumnValue === id);
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [id]);

  return { data, loading, error };
};

// 修改后的渲染函数
const _renderCard = ({item}) => {
  const {code, id} = item;
  const { data, loading, error } = useItemData(id);

  if (loading) return <Card index={code}>加载中...</Card>;
  if (error) return <Card index={code}>加载失败</Card>;
  
  return (
    <Card index={code}>
      {data && <AnotherComponent data={data} />}
    </Card>
  );
};

const Foo = () => {
  return (
    <FlatList
      data={rawData}
      initialNumToRender={rawData.length}
      keyExtractor={item => item.code}
      renderItem={_renderCard}
    />
  );
};

方案2：预加载所有数据后再渲染FlatList #

如果数据量不大，可以在组件初始化时一次性拉取所有需要的数据，避免每个子组件单独发起请求：

const Foo = () => {
  const [processedData, setProcessedData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchAllData = async () => {
      try {
        // 批量获取所有项对应的数据
        const dataList = await Promise.all(
          rawData.map(async item => {
            const data = await database.get(SOME_TABLE).Where(someColumnValue === item.id);
            return {...item, data};
          })
        );
        setProcessedData(dataList);
      } catch (err) {
        console.error('数据加载失败:', err);
      } finally {
        setLoading(false);
      }
    };
    fetchAllData();
  }, []);

  if (loading) return <div>全局加载中...</div>;

  const _renderCard = ({item}) => {
    const {code, data} = item;
    return (
      <Card index={code}>
        <AnotherComponent data={data} />
      </Card>
    );
  };

  return (
    <FlatList
      data={processedData}
      initialNumToRender={processedData.length}
      keyExtractor={item => item.code}
      renderItem={_renderCard}
    />
  );
};

选型建议 #

• 方案1适合数据量大、需要懒加载的场景，可额外添加缓存逻辑避免重复请求。
• 方案2适合数据量小的场景，能减少请求次数，提升整体性能。

内容的提问来源于stack exchange，提问作者four-eyes