为什么我的 useEffect 无法“获取”数据，直到我必须将 props 重写到其他组件......？

Question

我尝试从服务器“获取”“用户信息”。

API GET url 为：/users/${memberId} userID为数字类型memberId（例4）

以下是我的问题..

当我点击“ ”上的“userIcon”时，我应该链接页面并加载正确的用户信息

当我尝试直接检查本地主机的页面时，它没有显示。 但是当我删除“ userId={userData.memberId} ”时，页面就会显示并重写 “ userId={userData.memberId} ”并保存，页面也正常了。

//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>
)

“userId={userData.memberId}”中的链接用于路径UserPage。 这是console.log(userData)

在此处输入图像描述

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

问题是当我单击该 UserIcon 时，它不起作用并且出现错误。 错误告诉我<<无法读取未定义的属性（读取'memberId'）>>

那么..为什么我的代码不起作用？ ：单击用户图标 -> 使用 uerl /users/${memberId} 转到 UserPage。 为什么在我删除 LoginHeader 中的 memberId 道具之前 useEffect 'GET' 不起作用？？？

Answer 1

因为userData是未定义。您没有显示在何处/如何初始化它，但大概是这样的？：

const [userData, setUserData] = useState();

这会将其初始化为未定义。因此，当组件首次呈现时，您无法从 userData 读取属性，因为它是未定义。它可能在稍后的时间有一个值，但那时代码已经抛出了错误。

一种选择是将其初始化为空对象：

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

在这种情况下，userData.memberId 不会抛出错误，但会向该组件传递一个 undefined 值。

另一个选项是在 userData 具有值之前不渲染组件：

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

您更喜欢什么选项完全取决于您。但最主要的是您无法从 undefined 读取属性。