React组件中无法访问对象属性的问题排查

核心原因：组件渲染时机与异步数据的冲突 #

• props.db大概率是通过异步请求获取的数据（比如从后端API拉取），React组件初始渲染时，这个数组还没拿到数据，可能是空数组或者undefined。
• 直接写props.db[1].id时，初始渲染阶段props.db[1]是undefined，自然读不到id属性，触发类型错误。
• 你看到console.log(props.db[1])能拿到目标对象，是浏览器console的“动态更新”特性搞的鬼——console显示的是数据加载完成后的数组状态，而非代码执行瞬间的真实值。如果想看到真实的执行时状态，可以改成console.log(JSON.parse(JSON.stringify(props.db[1])))，这时就能看到初始时它其实是undefined。

为什么map遍历能正常运行？ #

• Array.prototype.map对空数组会直接返回空数组，不会执行遍历的回调函数。当props.db初始为空时，map不会去尝试访问item.id这类属性；等异步数据加载完成，props.db有了内容，map才会遍历并读取属性，所以不会报错。

快速解决方法 #

• 使用可选链操作符：props.db[1]?.id，当props.db[1]为undefined时会直接返回undefined，不会抛出错误。
• 加条件判断：{props.db.length > 1 && <span>{props.db[1].id}</span>}，确保数组长度足够时才访问属性。

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