React使用Axios请求API数据，页面刷新后访问数组元素报错如何解决

1. 组件初始化时你设置的data默认值是空数组，第一次渲染执行return逻辑时，axios的异步请求还没有拿到返回结果，data[0]为undefined，直接访问undefined的Total_Weight属性就会触发报错。热更新时组件不会重置已缓存的状态，之前请求到的data还存在，所以不会触发错误。
2. 你当前的useEffect没有配置依赖数组，会导致每次组件重新渲染都重复发起接口请求，存在不必要的性能损耗。

• 第一步：给useEffect添加空依赖数组，保证仅在组件首次挂载时发起一次请求

useEffect(()=>{
    getData();
}, []) // 新增空依赖数组

• 第二步：处理数据加载中状态，避免访问不存在的属性，可选两种常用方案：
  方案1：使用可选链+默认值，修改所有访问data对应索引属性的代码即可：
  例如把data[0].Total_Weight修改为data[0]?.Total_Weight ?? '加载中'，其余data[1]到data[4]的位置做相同修改即可。
  方案2：新增加载状态判断，数据未返回时展示加载提示，加载完成后再渲染正式内容：
  首先新增加载状态声明：

  const [loading, setLoading] = useState(true);
  

  然后在请求成功后修改加载状态：

  const getData = async ()=>{
    const response = await axios.get('http://localhost:5000/in-data')
    setData(response.data)
    setLoading(false)
  }
  

  最后在return逻辑最前面加加载判断：

  if(loading) return <div>数据加载中，请稍候</div>
  // 后面保留你原有渲染GeoJSON的代码即可
  

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