React中async函数引发TypeError：无法读取undefined的img1属性

为啥加async就报错？ #

React组件要求必须返回React元素、null或者undefined，但你给组件函数加了async之后，这函数就变成异步函数了——异步函数的返回值是个Promise对象，不是直接返回JSX。React根本认不出这个Promise，渲染的时候把它当普通对象处理，自然找不到response.data.img1这些属性，直接抛出类型错误。

而且你原代码还有个隐患：直接在组件函数体里发起异步请求，每次组件渲染都会重复调用接口，请求完成前response还未被赋值，同样会导致读取属性报错，只是加了async后问题先暴露出来了。

正确写法 #

用React的useState管理异步数据，useEffect触发请求：

import { useState, useEffect } from 'react';

function Banners(props) {
  // 用state存储接口返回的数据
  const [bannerData, setBannerData] = useState(null);

  // 组件挂载时发起请求，空依赖数组保证只请求一次
  useEffect(() => {
    async function fetchBannerData() {
      try {
        const response = await axios.get(`${apiUrl}/assets/get`);
        setBannerData(response.data);
      } catch (err) {
        console.error('Banner数据请求失败:', err);
      }
    }
    fetchBannerData();
  }, []);

  // 数据未加载完成时返回加载提示
  if (!bannerData) {
    return <div>加载中...</div>;
  }

  return (
    <MainContent
      text={bannerData.text}
      img1={props.img1 || bannerData.img1}
      img2={props.img2 || bannerData.img2}
    />
  );
}

补充说明 #

• 用空数组[]作为useEffect的依赖，能避免组件重复渲染时重复发起请求。
• 添加try/catch捕获请求异常，防止请求失败导致页面崩溃。
• 数据未加载完成时返回加载状态，避免读取未定义的bannerData属性报错。

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