React中Axios控制台有返回数据但渲染时img值为undefined

两个核心问题导致图片加载失败：

• 接口返回值取值层级错误
  从控制台打印的返回结果可以看到，接口返回的结构是外层包裹了product字段的对象，实际的商品数据（含img字段）存在res.data.product下，不是直接挂在res.data上。代码里直接执行setProduct(res.data)，导致state中存储的结构为{ product: 真实商品数据 }，直接读取product.img自然返回undefined。
• 初始渲染空状态未处理
  给product设置的初始值是空对象{}，组件首次挂载时axios请求还未返回，此时state还没被更新为真实商品数据，空对象上不存在img属性，img标签的src为空，自然无法加载图片。

另外axios配置还有个不影响当前问题、但后续会出bug的笔误：userRequest配置里请求头字段写错了，axios识别的配置项是headers不是header，后续用带token的请求时会出现鉴权失败的问题。

1. 修正state赋值的取值层级
   把useEffect请求逻辑里的setProduct代码改成取内层的商品对象：

const res = await publicRequest.get("/products/find/" + id);
setProduct(res.data.product); // 原写法为setProduct(res.data)
console.log(res.data);

2. 加初始加载判断，避免空值渲染
   给组件加加载态判断，数据没返回前不要渲染商品详情内容：

// 初始值设为null方便判断加载状态
const [product, setProduct] = useState(null);

// return的JSX里对应图片位置改成
{
  product ? (
    <ImgContainer>
      <Image src={product.img} />
    </ImgContainer>
  ) : <div>商品加载中...</div>
}

3. 修正axios配置的笔误
   把requestMethods.js里userRequest的配置字段改对：

export const userRequest = axios.create({
    baseURL: BASE_URL,
    headers: { token: `Bearer ${TOKEN}` } // 原写法为header，缺少末尾s
});

改完后重新刷新页面，即可正常读取到img地址渲染图片，控制台打印product.img也不会再出现undefined。

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