React访问数组第0项报cannot read properties of undefined(reading '0')

报错原因 #

这个问题是React异步更新state + 浏览器控制台引用传递的特性共同导致的：

1. 你当前的this.state.data.videos大概率是通过异步请求（比如接口调用）拿到后更新到state的，在组件首次渲染、代码执行到访问[0]的节点时，异步请求还没有返回结果，this.state.data.videos此时还是undefined，所以访问[0]就会抛出对应错误。
2. 你直接打印this.state.data.videos时，浏览器控制台输出的是对象的引用，等你点开控制台查看打印结果的时候，异步请求已经完成、state已经更新，所以你看到的是填充完成的数组，误以为执行打印语句时数组已经存在。

解决方案 #

可以从以下两个方向任选其一处理，也可以搭配使用：

• 访问前加判空逻辑：用可选链语法访问，避免读取undefined的属性：

  console.log("Dataa", this.state.data?.videos?.[0])
  

  也可以先判断数组存在且有值再访问：

  if (this.state.data?.videos?.length) {
    console.log("Dataa", this.state.data.videos[0])
  }
  

• 给state设置默认初始值：在组件初始化state的时候，给data.videos设置为空数组兜底，避免初始状态为undefined：

  state = {
    data: {
      videos: [],
      // 其余自定义属性
    }
    // 其余state属性
  }
  

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