React Map组件报TypeError: Cannot read properties of undefined (reading 'question')如何解决

报错原因 #

该错误本质是Map组件接收的object属性为undefined，代码直接读取undefined.question触发了类型错误。
结合「完成最后一道题后报错」的场景，根因是记录当前题目序号的状态变量ragaca在点击提交时持续累加，最终超过了题目数组的最大下标，父组件从题目数组中取值时拿到了undefined，再传递给Map组件的object属性就触发了报错。

修复方案 #

方案1：组件内加非空兜底 #

直接在当前组件做兼容，避免属性为空时报错，有两种实现方式：

• 使用可选链运算符做安全访问：

import React from "react";

function Map(props) {
  return (
    <div>
      <p>{props.object?.question}</p>

      {props.object?.answers?.map((e) => (
        <React.Fragment key={e.id}>
          <input
            type="radio"
            id={e.id}
            name={props.object?.id}
            value={e.correct}
          />
          <label htmlFor={e.id}>{e.answer}</label>
          <br />
        </React.Fragment>
      ))}

      <input
        type="submit"
        value="პასუხი"
        onClick={() => props.setRagaca(props.ragaca + 1)}
      />
    </div>
  );
}

export default Map;

额外说明：顺便把标签的for属性替换为React规范的htmlFor，同时给map遍历的节点加了唯一key，避免控制台抛出告警

• 提前判断属性是否存在，为空时直接返回结束提示：

function Map(props) {
  if (!props.object) {
    return <div>所有题目已完成</div>
  }
  // 原有渲染逻辑保持不变
}

方案2：父组件侧限制序号范围 #

从触发逻辑根源解决问题，在点击提交累加序号时判断是否已经到达最后一题，避免序号越界：
修改提交按钮的点击事件逻辑：

<input
  type="submit"
  value="პასუხი"
  onClick={() => {
    // 父组件的题目数组总长度通过total属性传入
    if (props.ragaca < props.total - 1) {
      props.setRagaca(props.ragaca + 1)
    } else {
      // 最后一题提交后的自定义逻辑，比如跳转结果页、展示得分
      console.log('答题完成')
    }
  }}
/>

父组件调用Map时需要额外传入总长度参数：<Map object={currentQuestion} ragaca={index} setRagaca={setIndex} total={questionList.length} />

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