React中如何用点语法访问state对象数组的嵌套属性并解决报错

报错根本原因 #

你遇到的报错是React类组件异步数据渲染的典型问题：

1. 组件初始化时state.responses是空数组，第一次触发render函数时，接口请求还未返回数据，responses[0]为undefined，直接访问.value自然会抛出属性读取错误。
2. 你看到console.log(this.state.responses[0])能正常输出，是浏览器控制台的异步引用特性导致：打印时引用指向的是空值，等接口请求完成更新state后，控制台会自动更新该引用的展示内容，让你误以为打印时就已经有值。

访问属性的解决方案 #

你要的属性可以直接用点语法访问，只需要做好空值兼容即可，以下是几种常用方案：

方案1：可选链操作符（最简单，兼容性足够的场景优先用）

直接用?.替代.访问可能为空的属性，前面的属性不存在时会直接返回undefined不会报错：

• 访问id：this.state.responses[0]?.id
• 访问score：this.state.responses[0]?.score
• 访问text：this.state.responses[0]?.text
• 访问CCO对应的no值：this.state.responses[0]?.value?.designations?.CCO?.no

方案2：提前做数组非空判断

在render函数最前面先判断数组有没有数据，没数据时返回加载占位，有数据再正常访问：

render() {
  const { responses } = this.state;
  // 数组为空时展示加载状态
  if (responses.length === 0) return <div>数据加载中...</div>;
  // 后续可以正常用点语法访问属性
  const ccoNo = responses[0].value.designations.CCO.no;
  return (
    <div>
      <p>问题id：{responses[0].id}</p>
      <p>问题分数：{responses[0].score}</p>
      <p>问题内容：{responses[0].text}</p>
      <p>CCO人数：{ccoNo}</p>
    </div>
  )
}

方案3：短路运算符兼容

适合单个属性临时访问的场景，前面的条件不成立时不会执行后面的属性读取：

// 读取CCO的no值
const ccoNo = this.state.responses[0] && this.state.responses[0].value && this.state.responses[0].value.designations && this.state.responses[0].value.designations.CCO && this.state.responses[0].value.designations.CCO.no;

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