React使用axios获取图片地址时报错image_resto未定义如何解决

开发者阿泽

2026-10-2

问题根因

React的状态更新是异步批量操作：你在getInfosRestaurant方法中调用setRestaurantInformations(response.data)之后，立刻访问RestaurantInformations.data.image_resto，此时状态还未完成更新，拿到的还是初始值空数组[]，自然不存在data属性，就会触发读取image_resto的undefined报错。
控制台打印的迷惑性：你看到控制台输出的RestaurantInformations有正常数据，是因为控制台打印的是对象的引用，等你手动点击展开对象的时候，React状态已经完成了更新，所以能看到完整数据，但代码执行到拼接图片地址那一行的时候，状态还没更新，值还是初始的空数组。
缺少空值兼容逻辑：没有做属性存在性判断就直接嵌套读取属性，数据结构不匹配或者加载未完成时很容易触发类型错误。

修复方案

直接修改getInfosRestaurant方法的取值逻辑，用接口返回的原始值拼接地址，不要使用刚更新的状态即可：

const getInfosRestaurant = async() => {
  await Axios.get('http://localhost:3001/get-restaurant-infos', 
  { params: 
    { id: localStorage.getItem('id') } 
  }).then((response) => {   
    setRestaurantInformations(response.data);
    // 直接用接口返回的response.data取值，同时加可选链和兜底值兼容异常情况
    const imgPath = response.data?.image_resto ?? '';
    setImageRestaurant('http://localhost:3001/upload/' + imgPath);
  }).catch(err => {
    // 加异常捕获，避免接口报错导致页面崩溃
    console.log('获取餐厅信息失败', err);
  });
};