React函数组件访问嵌套属性报错但console.log输出正常是什么原因？

问题原因 #

• 你为details设置的初始值是空对象{}，组件首次渲染时useEffect内的异步接口请求还未执行完成，此时details.admin的值为undefined，直接访问details.admin.userName就会触发「无法读取undefined的userName属性」的报错。
• console.log看起来输出正常是浏览器控制台的特性导致的：控制台打印引用类型值时是懒解析的，你点开查看打印结果时接口请求已经完成、details状态已经更新，所以你看到的是更新后的完整admin对象，实际上首次渲染时console.log(details.admin)打印的是undefined。

解决方案 #

你可以任选下面任意一种方案修复：

1. 使用可选链操作符规避空值报错：

<h4>Admin : {details.admin?.userName}</h4>

可选链会在details.admin为undefined/null时直接返回undefined，不会抛出错误。

2. 增加条件渲染，仅当admin存在时才渲染对应节点：

{details.admin && <h4>Admin : {details.admin.userName}</h4>}

3. 给details设置更合理的初始值，提前预设admin结构：

const [details, setDetails] = useState({admin: {}})

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