访问数组内嵌套对象的label属性报0 of undefined错误是什么原因？

报错核心原因 #

你遇到的0 of undefined错误，本质是访问data.parsed[0]时，data.parsed的值为undefined，对undefined执行下标访问操作自然会抛出异常。同时你的属性访问路径也存在错误，就算parsed加载完成也拿不到label值。

具体问题拆解 #

• 问题1：数据加载时序问题
  绝大多数这类报错都是因为data是异步接口返回的动态数据，在页面/组件初始渲染时，data还没被赋值为接口返回的完整结构，此时data.parsed为undefined，直接访问[0]就会触发报错。
• 问题2：属性访问路径错误
  按照你给出的数据结构，label字段嵌套在parsed[0].food下，你写的data.parsed[0].label跳过了food层，正确的访问路径应为data.parsed[0].food.label。

修复方案 #

1. 使用可选链操作符做访问兜底，避免某一层为空时抛错，修改后代码为：

   {data?.parsed?.[0]?.food?.label}
   

   当中间任意层级未初始化时，表达式会直接返回undefined而非抛出异常。
2. 给data设置合理的初始值，比如初始化时就给parsed字段赋值为空数组：

   // 示例为React useState初始化写法，其他框架同理
   const [data, setData] = useState({
     parsed: []
   })
   

3. 可以添加加载状态判断，等接口请求完成后再渲染对应字段，避免渲染时访问未初始化的属性。

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