反应('url')未定义的属性无法读取

Question

我可以从redux访问状态const { isauthenticated, user } = useSelector((state) => state.user);

但是正如你在下面的代码中看到的

<div className="container-fluid upnavcon">
<span className="navbar-brand fs-1 gwen">Gadget Zone</span>
{isauthenticated ? (
<div className="buttonbox">
<Link className="upnavbtns" to="/LogSign">
Login / Signup
</Link>
</div>
) : (
<>
<SpeedDial
ariaLabel="SpeedDial tooltip example"
onClose={() => setOpen(false)}
onOpen={() => setOpen(true)}
open={open}
direction="down"
icon={
<img
className="speedDialIcon"
src={`${user.avatar.url?user.avatar.url:"/logo192.png"}`}
alt="pic"
/>
}
>
<SpeedDialAction icon={<DashboardIcon/>} tooltipTitle="DAshboard"/>
<SpeedDialAction icon={<DashboardIcon/>} tooltipTitle="DAshboard"/>
</SpeedDial>
</>
)}
</div>

如果用户通过了身份验证，那么我将显示其他内容问题是Cannot read properties of undefined (reading 'url')，在错误的最后写着

Consider adding an error boundary to your tree to customize error handling behavior.

我的加载状态是loading:false, isauthenticated:true2秒后加载:false, isauthenticated:true,user{…}

Answer 1

就像Hunter McMillen在评论中补充的那样，看起来user.avatar是未定义的。

所以当你创建三元表达式时:

user.avatar.url ? user.avatar.url : "/logo192.png"

user.avatar.url失败，因为user.avatar没有定义。

你可以用可选的链接修复这个问题，如下所示:

user.avatar?.url ? user.avatar.url : "/logo192.png"

编辑:正如Ahmad Faraz在评论中所说，你可以进一步简化为user.avatar?.url || "/logo192.png"，不需要使用三元表达式。

Answer 2

看起来user.avatar可以未定义。要修复这个错误，只需在该行添加一个检查符:

src={`${user.avatar?.url ? user.avatar.url : "/logo192.png"}`}

Answer 3

如何存储您的状态?当你调用它时，你可以尝试使用三元制，这不是解决问题的正确方法，但你可以试试这个。

const {isauthenticated, user} = useSelector((state) =>州? .user);