如何解决Reactjs中TypeError: Cannot read properties of undefined (reading '0')报错

错误根因 #

该报错是代码尝试访问undefined值的0索引属性触发的，绝大多数场景出现在数组取值操作中：当你要读取某个数组的第一个元素时，该数组本身未被定义/未完成初始化。

常见排查修复方案 #

• 检查数组类state的初始化配置：如果是用useState声明的数组类型状态，初始化时必须显式赋值为空数组[]，不能省略初始值写useState()，后者的初始值为undefined，首次渲染时直接访问arr[0]就会触发报错。
• 增加取值兼容逻辑：涉及数组下标取值的位置，统一使用可选链语法规避报错，把arr[0]替换为arr?.[0]，当arr为undefined时会直接返回undefined而不是抛出异常。
• 增加条件渲染判断：在使用数组元素的位置先判断数组是否存在且有值，示例如下：

// 错误写法
<span>{userList[0].userName}</span>

// 正确写法
<span>{userList?.length ? userList[0].userName : '暂无数据'}</span>

快速定位方法 #

打开浏览器开发者工具的Console面板，点击报错信息对应的堆栈跳转链接，可直接定位到触发报错的具体代码行，快速确认是哪个数组的取值逻辑存在问题。

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