Javascript 无法使用条件渲染渲染不同的结果

我正在尝试检查用户是否有允许他上载图像的用户名，否则我想要求用户登录，但我尝试这样做，以确保出现以下错误：

TypeError: Cannot read property 'displayName' of null

App
C:/Users/User/Desktop/try-react/new-app/src/App.js:91

这是导致错误的代码：

返回(
{user.displayName？：登录名}

您的用户具有空值。请使用此选项进行空值检查

{user ? <ImageUpload  username={user?.displayName} /> : <h3>login</h3>}

{user？：login}

App.js:91代码行是：{}错误消息是不言自明的，即

user

是

null

。原因可能是

user

有值之前组件的初始呈现。在访问其

属性之前，确保
user
不是
null
。displayName

属性。因为您正在检查

user

是否真实，所以t访问

.displayName

属性时，无需使用可选链接。这样，当您没有用户作为对象时，您就可以进行额外检查。