React Native中FlatList不渲染Promise.all多接口请求返回结果问题

核心问题点 #

• 第一：异步函数无法直接返回JSX供组件渲染：你定义的retrieveAll是async函数，执行后返回的是Promise对象，不是可渲染的React元素，React无法直接渲染Promise的返回结果。
• 第二：接口返回数据未存入组件状态：React组件只有在state/props变更时才会触发重渲染，你拿到的results只是异步函数内的局部变量，修改它不会触发组件更新，自然无法渲染新内容。
• 第三：请求逻辑调用时机错误：你当前没有主动调用retrieveAll的逻辑，同时顶层直接写fetch会导致每次组件重渲染都重复发起请求。

修复后的代码示例 #

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

const ListScreen = () => {
  // 定义state存储接口返回数据
  const [listData, setListData] = useState([]);

  useEffect(() => {
    const retrieveAll = async () => {
      const first = fetch('https://EXAMPLEAPI').then(resp => resp.json())
      const second = fetch('https://EXAMPLEAPI').then(resp => resp.json())
      const third = fetch('https://EXAMPLEAPI').then(resp => resp.json())
      const results = await Promise.all([first, second, third])
      // 把数据存入state触发重渲染
      setListData(results);
    }
    // 组件挂载时调用请求逻辑
    retrieveAll();
  }, []); // 空依赖数组保证只在组件首次挂载时发起请求

  // 组件直接返回渲染逻辑，从state取数据
  return (
    <FlatList
      keyExtractor={item => item.title}
      data={listData}
      renderItem={({ item }) => <Text>{item.title}</Text>}
    />
  )
}

export default ListScreen;

额外注意事项 #

• 建议增加请求加载态、错误捕获逻辑，优化用户体验，比如加loading展示、请求失败提示。
• 确认results数组的每一项都存在title字段，避免keyExtractor和渲染时报错。

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