React中useEffect获取用户数据后渲染图片出现TypeError问题求助

首次登录时，虽然isLoggedIn为true，UserTrigger组件会被渲染，但组件内的接口请求是异步的——组件先完成初始渲染，此时Context中的user还是初始状态（大概率是undefined或空对象），所以访问user.image[1]会触发"无法读取undefined的属性'1'"的错误。后续接口返回数据后user状态更新，再改回user.image[1]能显示，但退出重登后又回到初始渲染时的问题。

1. 给user设置兜底初始值 #

在你的UserContext初始化时，给user设置包含空数组image的初始值：

const [user, setUser] = useState({ image: [] });

这样即使请求未完成，user.image是一个空数组，访问user.image[1]只会得到undefined，不会抛出类型错误，img标签会处理这个值（显示占位或不显示）。

2. 使用可选链操作符规避错误 #

直接修改img的src属性，用可选链处理可能的undefined：

<img src={user?.image?.[1]} />

可选链会在user或user.image不存在时，直接返回undefined，避免触发报错。

3. 添加加载状态，控制渲染时机 #

在UserTrigger组件内增加加载状态，请求完成前不渲染img：

const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  const fetchUser = async () => {
    const secret = localStorage.getItem('secret');
    const res = await fetch('/api/user', { headers: { Authorization: `Bearer ${secret}` } });
    const userData = await res.json();
    setUser(userData);
    setIsLoading(false);
  };
  fetchUser();
}, []);

// 渲染部分
return (
  <div>
    {isLoading ? <span>加载中...</span> : <img src={user.image[1]} />}
  </div>
);

4. 严谨判断user数据是否就绪 #

在渲染img前，先判断user和image数组是否存在且长度足够：

{user && user.image && user.image.length > 1 && <img src={user.image[1]} />}

确保只有当user存在、image是数组且至少有2个元素时，才渲染img标签。

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