React Native多API请求初始化无数据问题解决方案咨询

你的问题核心是异步请求的时序问题：组件首次渲染时，useEffect触发但所有fetch都是异步操作，此时组件已经完成渲染，console.log输出初始空数组；而保存文件触发热重载时，要么之前的请求已经完成，要么热重载重新执行useEffect后请求更快完成，所以能看到数据。

问题代码的不足 #

原来的写法用map遍历发起请求，每个请求完成后单独更新state，会导致：

• 多次触发组件重渲染（每个请求完成一次就更新一次）
• 无法保证请求完成的顺序，state里的title顺序可能和ids不一致
• 你可能只关注了首次渲染的console.log输出，没看到后续state更新后的日志

修正方案：用Promise.all批量处理请求 #

把所有请求包装成Promise数组，等待全部完成后一次性更新state，既减少重渲染次数，又能确保数据完整：

const [dataLoc, setDataLoc] = useState([]);
const ids = [1,2,3,4,5];

useEffect(() => {
  // 生成所有请求的Promise集合
  const fetchTasks = ids.map(id => 
    fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .then(response => {
        // 检查请求是否成功
        if (!response.ok) throw new Error(`请求ID ${id} 失败`);
        return response.json();
      })
      .then(data => data.title) // 只提取需要的title字段
  );

  // 等待所有请求完成后统一更新状态
  Promise.all(fetchTasks)
    .then(allTitles => setDataLoc(allTitles))
    .catch(error => console.error('数据获取失败:', error));
}, []);

console.log(dataLoc);

额外优化：添加加载状态 #

如果需要在界面上提示用户加载状态，可以新增一个loading状态：

const [dataLoc, setDataLoc] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const ids = [1,2,3,4,5];

useEffect(() => {
  const fetchTasks = ids.map(id => 
    fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .then(response => {
        if (!response.ok) throw new Error(`请求ID ${id} 失败`);
        return response.json();
      })
      .then(data => data.title)
  );

  Promise.all(fetchTasks)
    .then(allTitles => {
      setDataLoc(allTitles);
      setIsLoading(false);
    })
    .catch(error => {
      console.error('数据获取失败:', error);
      setIsLoading(false);
    });
}, []);

// 加载中时显示提示
if (isLoading) {
  return <Text>加载中...</Text>;
}

// 渲染数据
return (
  <View>
    {dataLoc.map((title, index) => (
      <Text key={index}>{title}</Text>
    ))}
  </View>
);

这样修改后，组件启动时会先执行useEffect里的批量请求，所有请求完成后一次性更新dataLoc，此时组件会重新渲染，console.log会输出完整的title数组（你在控制台能看到两次输出：第一次是空数组，第二次是完整数据）。

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