React类组件解析嵌套API数据访问属性报undefined错误如何解决

问题核心原因 #

1. 状态更新逻辑错误：你在axios的请求回调中只是写了一个未被赋值的对象字面量，完全没有调用this.setState方法更新组件状态，所以state里的responses/scores/values一直是初始的空数组。
2. 初始渲染无数据：就算修复了状态更新逻辑，组件首次渲染时axios请求还没有返回结果，此时values[0]是undefined，直接访问undefined的属性自然会抛出类型错误。你在控制台能看到完整的数组内容，是因为浏览器控制台打印引用类型时是延迟求值的，你点击展开数组时请求已经完成、状态已经更新，和代码执行时的上下文不是同一个时间点。
3. 数组项类型不一致：从你贴的values数组打印结果可以看到，数组中存在大量字符串类型的项（如yes/no），不是所有项都是对象，即使数据加载完成后，访问字符串类型项的属性也会报错。

修复步骤 #

1. 修正请求回调中的状态更新逻辑，调用this.setState写入数据：

fetchQuestionAnswers = () => {
  if (this.state.activeSupervisionId) {
    axios.get('/question/response/' + this.state.activeSupervisionId).then(res => {
      this.setState({
        responses: res.data.data,
        scores: res.data.data.map((s) => s.score),
        values: res.data.data.map((v) => v.value),
        loading: false
      })
    }).catch(err => console.error(err));
  }
}

2. 给初始state添加loading状态，避免无数据时渲染表格：

state = {
  responses: [],
  scores: [],
  values: [],
  loading: true // 新增加载状态
}

3. 渲染时先判断加载状态，属性访问用可选链做兼容处理：

render() {
  const { loading, scores, values } = this.state;
  // 加载中显示提示
  if (loading) return <div>加载中...</div>;

  return (  
    <div className="pdf-table-container">
      <table className="pdf-table">
        <thead>
          <tr>
              <th className="id-col">Id</th>
              <th className="text-col">Question</th>
              <th className="score-col">Score</th>
              <th className="value-col">Value</th>
          </tr>
        </thead>
        <tbody>
          <tr className="">
              <td className="text-center">1</td>
              <td className="text-left">Staff living in the residential quarter</td>
              <td className="text-center">{scores[0] ?? ''}</td>
              <td className="text-left">
                {/* 先判断是不是对象，再访问属性，兼容字符串类型的项 */}
                {typeof values[0] === 'object' ? values[0]?.staffLivingInQuarter ?? '' : values[0]}
              </td>
          </tr>
        </tbody>
      </table>
    </div>
  )
}

如果你的项目环境不支持可选链语法，可以用传统的短路判断写法：values[0] && values[0].staffLivingInQuarter。

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