React Native嵌套异步循环中如何更新state？

你的代码能正常获取API数据但无法更新placesOpen状态，核心问题出在异步遍历的处理方式和频繁的状态更新上：

1. forEach不支持异步等待：genericLocations.forEach(async (type) => {...})里的每个异步请求都是独立执行的，forEach不会等待它们完成，导致状态更新的时机和顺序不可控。
2. 多次触发状态更新：你在遍历每个API返回的result时都调用setPlacesOpen，虽然用了函数式更新避免闭包问题，但频繁的状态更新可能被React合并，或者因为异步请求的返回顺序混乱，导致最终状态不符合预期。

修复后的代码 #

Geocoder.from(location).then(async (json) => {
  const locResult = json.results[0].geometry.location;
  
  // 用map生成所有API请求的Promise，统一等待完成
  const placeRequests = genericLocations.map(async (type) => {
    const response = await fetch(`google places url`); // 确保这里包含locResult和营业中过滤参数
    const data = await response.json();
    // 提取当前类型下的所有营业地点名称
    return data.results.map(result => result.name);
  });

  // 等待所有请求完成，合并所有结果
  const allPlaces = await Promise.all(placeRequests);
  const allPlaceNames = allPlaces.flat();

  // 一次性更新状态，避免多次重渲染
  setPlacesOpen(prev => [...allPlaceNames, ...prev]);
  // 如果需要和原代码一样，把新获取的地点放在数组最前面（原代码每次将单个name前置），可以反转数组：
  // setPlacesOpen(prev => [...allPlaceNames.reverse(), ...prev]);
});

关键改进点 #

• 用map替代forEach：生成Promise数组，通过Promise.all等待所有API请求完成，保证数据全部获取后再更新状态。
• 批量更新状态：先收集所有地点名称，再一次性调用setPlacesOpen，减少组件重渲染次数，同时确保状态更新的准确性。
• 保持函数式更新：依然使用prev => [...newData, ...prev]的形式，避免闭包捕获旧状态的问题。

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