React Native 中如何判断对象未定义 解决嵌套属性访问报错

报错原因 #

你当前仅判断了auth不为undefined，但auth._W、auth._W.user任意一层属性为undefined或null时，直接访问深层的first_name就会抛出该类型错误。

解决方法 #

方法1：使用可选链操作符（推荐）

可选链?.会在访问到空值/undefined时直接终止表达式返回undefined，无需编写多层判断，直接修改代码即可：

<Text>Welcome! 
     {auth?._W?.user?.first_name ?? null}
</Text>

这里额外搭配的空值合并运算符??，作用是如果前面的表达式返回undefined/null时，统一输出null，符合你不存在就不展示的需求。

方法2：多层逻辑与判断（兼容旧环境）

如果你的项目环境不支持ES2020的可选链语法，可以用层层逻辑与判断：

<Text>Welcome! 
     {auth && auth._W && auth._W.user && auth._W.user.first_name || null}
</Text>

只有每一层属性都存在时，才会读取最后的first_name值，否则返回null不展示。

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