React Native访问数组报错Cannot read properties of undefined (reading '0')

开发者阿泽

2026-10-4

报错原因&修复方案

现有代码的3个核心问题

类型判断逻辑错误：你写的this.state.data == 'undefined'是把state.data和*字符串'undefined'*做对比，永远不会命中你想要的「data不存在」的分支，正确的undefined判断要么写typeof this.state.data === 'undefined'要么直接判断!this.state.data
缺少层级校验：就算this.state.data存在，也不能保证this.state.data.auctions是有效值，更不能保证它是长度大于0的数组，直接访问auctions[0]当然会报错
前置变量访问风险：你代码第一行的const data = this.state.data.auctions;如果写在test函数外部，组件初始化时state还没赋值data的话，这行代码会直接触发报错，不会等到test函数执行

修复后的代码示例

const test = () => {
  // 逐层校验：先确认data存在 → 再确认auctions是数组 → 最后确认数组长度大于0
  if (!this.state.data?.auctions?.length) {
    return <Text>No Auctions</Text>
  }
  // 走到这里已经能保证auctions至少有一个元素，访问索引0不会报错
  console.log(this.state.data.auctions[0].id)
  return <Text>{this.state.data.auctions[0].id}</Text>
}

如果你的运行环境不支持可选链?.语法，可以换成逐层判断的写法：

const test = () => {
  if (
    !this.state.data || 
    !this.state.data.auctions || 
    !Array.isArray(this.state.data.auctions) ||
    this.state.data.auctions.length === 0
  ) {
    return <Text>No Auctions</Text>
  }
  console.log(this.state.data.auctions[0].id)
  return <Text>{this.state.data.auctions[0].id}</Text>
}