React大洲选择器选中时触发undefined读取json属性报错

这个报错和react-router-dom v6适配没有任何关系，是代码里的两处低级错误导致的：

• 拼写错误：判断国家列表是否已加载时，你把length错写为lenght，导致判断逻辑异常。
• Axios用法错误：你混淆了Axios和原生fetch的响应处理逻辑：
  1. Axios会自动将接口返回的JSON数据解析完成，不需要像fetch一样手动调用.json()方法；
  2. 你写的第一个then回调里执行setCountries(data)后没有返回值，链式调用的下一个then拿到的参数是undefined，访问undefined.json就会抛出你看到的类型错误。

你误以为错误是点击大洲选择器触发，本质是Promise报错的抛出时机刚好和你操作选择器的时机重合：页面初始化时错误的请求逻辑已经生成了rejected状态的Promise，报错在微任务队列中等待执行，刚好在你操作选择器时被控制台打印，和选择器、路由库均无关。

直接替换HomePage.jsx中对应useEffect的代码即可：

useEffect(() => {
  // 修正length拼写错误，移除多余的错误json()调用
  if(!countries.length) {
    axios.get(ALL_COUNTRIES)
      .then(({data}) => setCountries(data))
      // 新增错误捕获，避免请求失败时出现未捕获的Promise错误
      .catch(err => console.error('国家列表加载失败', err))
  }
},[]);

替换完成后刷新页面，选择大洲、搜索功能都可以正常运行，不会再抛出该错误。

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