我尝试从服务器“获取”“用户信息”。
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' 不起作用？？？
因为
userData是未定义。您没有显示在何处/如何初始化它，但大概是这样的？：这会将其初始化为
未定义。因此，当组件首次呈现时，您无法从userData读取属性，因为它是未定义。它可能在稍后的时间有一个值，但那时代码已经抛出了错误。一种选择是将其初始化为空对象：
const [userData, setUserData] = useState({});在这种情况下，
userData.memberId不会抛出错误，但会向该组件传递一个undefined值。另一个选项是在
userData具有值之前不渲染组件：<div> { userData ? <LoginHeader changeNav={isUser.isLogin} userID={userData.memberId} /> : null } </div>您更喜欢什么选项完全取决于您。但最主要的是您无法从
undefined读取属性。