React开发Frontend Mentor Rest Countries API项目：邻国名称不显示求解

代码中存在的具体问题 #

• 异步执行时序完全错位：在borders.map中传入async回调时，map方法本身不会等待内部的异步操作执行完毕。当前的执行流程是：触发所有邻国的fetch请求后，立即把空的newBorders数组传入setCountryBorders，接着执行setCountry(data[0])、setIsLoading(false)，触发组件首次渲染。等后续邻国fetch请求陆续返回时，虽然会往数组里push邻国名称，但此时组件已经完成首次渲染，初始读取到的邻国列表永远是空值，后续零散的状态更新也会被map外部传入的空数组直接覆盖。
• 空值兜底缺失：如果当前国家没有任何接壤邻国，接口返回的borders字段为undefined，直接对这个值调用map方法会触发运行时错误，导致页面白屏崩溃。
• 状态更新逻辑冲突：目前代码在map的异步回调内部、map方法外部两次调用setCountryBorders，后者传入的始终是初始空数组，会把之前累积的邻国数据直接覆盖。
• 列表渲染属性不全：渲染邻国列表的<p>标签没有绑定React要求的key值，会触发控制台警告，在列表动态更新时甚至会出现渲染错乱。

核心修复逻辑 #

调整思路：等所有异步请求全部完成后，再统一更新页面状态，避免提前渲染空内容。

1. 用Promise.all包裹所有邻国的异步请求，等全部请求返回拿到所有邻国名称后，再统一更新countryBorders状态
2. 取到主国家数据后，立刻对borders字段做兜底处理：如果值不存在就赋值为空数组，避免调用map时报错
3. 等主国家数据、邻国数据全部加载完成后，再把isLoading设为false，避免页面提前渲染空的邻国区块
4. 给邻国列表的渲染元素绑定唯一key值

修复后的核心拉取逻辑参考：

const fetchingSingleCountry = async () => {
  // 拉取当前国家基础数据
  const response = await fetch(url + countryName);
  const [currentCountry] = await response.json();
  // 邻国数组空值兜底
  const borders = currentCountry.borders ?? [];
  // 等待所有邻国信息请求完成
  const borderFetchTasks = borders.map(async (borderCode) => {
    const borderRes = await fetch(url2 + borderCode);
    const borderDetail = await borderRes.json();
    return borderDetail.name;
  });
  const borderNamesList = await Promise.all(borderFetchTasks);
  // 所有数据就绪后再统一更新状态
  setCountry(currentCountry);
  setCountryBorders(borderNamesList);
  setIsLoading(false);
};

修复邻国渲染的代码片段：

{countryBorders.map((borderName, index) => {
  return <p key={index}>{borderName}</p>;
})}

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