React中useEffect获取用户数据异常及跳转传参报错问题

问题场景 #

我尝试从服务器GET用户信息，API地址为/users/${memberId}（memberId为数字类型，如4）。预期点击页面上的userIcon时，跳转到对应UserPage并加载正确用户信息，但遇到两个问题：

1. 直接访问页面时无法显示；删除LoginHeader组件的userId={userData.memberId} props后页面显示，重新添加并保存后页面恢复正常。
2. 点击userIcon时触发错误：Cannot read properties of undefined (reading 'memberId')，无法跳转到/users/${memberId}路径的UserPage。

相关代码 #

Header.tsx

useEffect(() => {
    const userGetData = async () => {
      return call(`/users`, 'GET', null)
      .then((res) => {
        const data = res[0]
        setUserData(data);
      });
    };

    userGetData();
  }, [])

...

return(
...
  <div>
      <LoginHeader changeNav={isUser.isLogin} userID={userData.memberId} />
   </div>
)

LoginHeader.tsx

// UserIcon
<Link to={`/users/${userID}`}
state={{userID: userID}}
className="relative p-2 text-gray-500 bg-transparent"
>
  <img/>
</Link>

问题解答 #

一、点击userIcon无法跳转的原因及解决 #

错误Cannot read properties of undefined (reading 'memberId')的核心是组件初始渲染时userData为undefined：

• userData是通过useEffect异步请求赋值的，组件第一次渲染时请求还没完成，userData处于初始的undefined状态，此时读取userData.memberId会直接抛出错误，导致Link的跳转路径无法正常生成，点击自然失败。

解决办法（任选其一即可）：

1. 给userData设置初始空对象，避免undefined：

   const [userData, setUserData] = useState({})
   

2. 使用可选链操作符安全读取属性：

   <LoginHeader changeNav={isUser.isLogin} userID={userData?.memberId} />
   

3. 条件渲染LoginHeader，确保userData存在后再渲染：

   {userData && <LoginHeader changeNav={isUser.isLogin} userID={userData.memberId} />}
   

4. 在LoginHeader内部处理空值，比如仅当userID存在时渲染跳转链接：

   {userID && (
     <Link to={`/users/${userID}`} state={{userID: userID}} className="relative p-2 text-gray-500 bg-transparent">
       <img/>
     </Link>
   )}
   

二、删除memberId props前useEffect请求异常的原因 #

直接访问页面时，因为userData初始为undefined，传递userData.memberId会触发渲染错误，导致整个组件树崩溃，useEffect作为组件的副作用，只有组件成功完成初始渲染后才会执行，所以此时请求根本没机会发起。

当你删除该props后，组件不再抛出渲染错误，useEffect正常执行并拿到用户数据，userData被更新为有效值；此时重新添加props并保存，组件重新渲染时userData已经有值，不会再触发错误，页面就能正常显示。

本质是渲染错误阻断了副作用的执行流程，只要保证组件初始渲染时不会读取undefined的属性，useEffect就能顺利发起请求。

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