React开发测验应用时映射读取API对象数组报错如何解决

• 初始状态类型不匹配：quizz状态的初始值被设置为空数组[]，但Open Trivia API返回的顶层数据是带response_code、results字段的普通对象，初始值类型和接口返回结构完全不一致，是后续报错的核心诱因。
• 异步请求时序问题：useEffect内的fetch接口请求是异步执行的，组件首次渲染、甚至用户点击切换到答题页时，请求很可能还未返回，此时传入Quizz组件的arr还是初始空数组，props.arr.results为undefined。直接对undefined调用map方法、读取[0].question这类深层属性，JS会直接抛出类型错误。
• 之前JSON.stringify能正常运行是因为代码里加了三目判空：data ? JSON.stringify(data) : "error"，首次渲染data为undefined时直接走错误分支，等数据返回后才执行序列化，不会触发非法读取；但编写map遍历逻辑时没有加这层防护，组件初始化阶段就执行非法属性访问，直接触发报错。

1. 修正quizz状态初始值，和接口返回结构对齐，从根源避免类型偏差：

// 原初始值为[]，替换为和接口结构一致的空状态
const [quizz,setQuizz] = React.useState({
  response_code: null,
  results: []
})

2. 读取嵌套属性时增加安全访问逻辑，不要直接裸读深层字段，Quizz组件修改如下：

function Quizz(props){
  // 用可选链?.做安全访问，任意一层数据为空就短路，不会抛出错误
  const questionList = props.arr?.results?.map(questionItem => {
    // 列表渲染记得加唯一key，避免React渲染警告
    return <p key={questionItem.question}>{questionItem.question}</p>
  })

  return(
    <div>
      {/* 数据未就绪时展示加载提示，提升体验 */}
      {questionList?.length ? questionList : <p>题目加载中...</p>}
    </div>
  )
}

3. 冗余逻辑简化：单独封装的dataSetter函数没有额外逻辑，可以直接删掉，fetch回调里直接调用setQuizz(apiData)即可。

• 初始状态必须对齐接口结构：接口返回对象就给同结构的空对象初始值，返回数组就给空数组初始值，不要随便赋值类型不相关的初始值，从源头减少类型错误。
• 所有异步返回的嵌套属性读取必须加安全校验：
  • 优先使用ES2020可选链操作符?.，写法示例：userInfo?.address?.city?.[0]?.name，任意一层数据为null/undefined都会直接短路返回undefined，不会触发报错
  • 兼容低版本环境时可以用逐层与判断空：userInfo && userInfo.address && userInfo.address.city && userInfo.address.city[0].name
• 必须增加加载态逻辑：请求未完成时统一展示加载提示，不要在数据未就绪时执行依赖数据的渲染逻辑，既优化用户体验，也能从渲染层面拦截非法访问。
• 遍历渲染列表项时，必须给每一项加唯一的key属性，避免React渲染性能问题和状态错乱。

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