使用Axios发起GET请求配合React useState存值，打印数据仍为null如何解决

核心问题 #

1. 状态更新的异步特性
   React 中 useState 的更新函数是异步执行的，调用 setCountryData 后，当前渲染周期内的 countryData 还是旧值（初始为 null），所以你在紧随其后的 then 里打印拿到的自然是 null，不代表赋值失败。
2. 首次渲染空值报错
   countryData 初始值为 null，组件首次渲染时请求还没返回，直接执行 countryData.name 这类取值操作会直接抛出空指针异常，阻断后续渲染流程，哪怕后续请求成功也可能无法正常展示。
3. 字段名不匹配
   你传给子组件的 subRegion、language 字段和 restcountries 接口的返回字段不匹配，接口实际返回的是全小写的 subregion、复数形式的 languages，字段写错会导致对应值为 undefined。

修复优化方案 #

1. 新增空值判断避免渲染报错 #

在渲染子组件前先判断 countryData 是否存在，不存在时展示加载状态：

// 原return中的Col部分修改为以下逻辑
<Col sm={6}>
  {
    countryData ? 
    <DetailInfo 
      name={countryData.name} 
      population={countryData.population} 
      region={countryData.region}
      subRegion={countryData.subregion} // 修正字段名
      capital={countryData.capital}
      topLevelDomain={countryData.topLevelDomain}
      currencies={countryData.currencies}
      language={countryData.languages} // 修正字段名
    /> 
    : <p>数据加载中...</p>
  }
</Col>

2. 正确验证状态更新结果 #

如果需要确认状态是否更新成功，可以新增 useEffect 监听 countryData 的变化：

// 新增监听countryData的副作用
useEffect(() => {
  if(countryData) {
    console.log('状态更新完成，数据为：', countryData)
  }
}, [countryData])

3. 完善请求逻辑健壮性 #

给请求增加错误捕获，同时用可选链避免接口返回空数组时报错：

// 原useEffect内的请求逻辑修改为：
useEffect(() => {
  const country = getCookie('title');
  if(!country) return; // 提前判断cookie是否存在，避免发起无效请求
  const queryURL = `https://restcountries.eu/rest/v2/name/${country}`;
  axios.get(queryURL)
  .then((res) => {
    setCountryData(res.data?.[0] || null);
  })
  .catch(err => {
    console.error('国家数据请求失败：', err);
    // 可在这里添加错误提示逻辑
  })
}, [])

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