React访问映射后数组内对象属性报undefined错误如何解决？

问题原因 #

你的报错是组件首次渲染时访问空数组元素导致的：

• 组件第一次渲染触发时，fetch 异步请求还没有返回结果，此时students的初始值是你设置的空数组[]
• 这时候直接执行students[0].fullName，students[0]就是undefined，读取undefined的属性自然会抛出类型错误
• 另外你把fetchStudentInfo()直接写在组件函数体里，会导致组件每一次重渲染都会重复发起接口请求，属于逻辑错误。

修复方案 #

1. 调整数据请求逻辑 #

把请求逻辑包裹在useEffect钩子中，只在组件挂载时执行一次：

// 先引入useEffect
import { useState, useEffect } from 'react';

function App() {
  const [students, setStudents] = useState([]);

  useEffect(() => {
    function fetchStudentInfo() {
      fetch('https://api.hatchways.io/assessment/students')
        .then(response => response.json())
        .then(data => {
          const transformedStudentData = data.students.map(studentData => ({
            imgURL: studentData.pic,
            fullName: `${studentData.firstName} ${studentData.lastName}`,
            email: studentData.email,
            company: studentData.company,
            skill: studentData.skill
          }));
          setStudents(transformedStudentData);
        });
    }
    fetchStudentInfo();
  }, []); // 空依赖数组表示只在组件挂载时执行一次

2. 处理数组访问的兼容逻辑 #

访问数组元素前先判断数组长度，或者用可选链操作符避免报错：

return (
  <div> 
    {/* 方法1：加条件判断，数组有值才渲染/打印 */}
    {students.length > 0 && console.log(students[0].fullName)}
    {/* 方法2：用可选链操作符?.，兼容undefined的情况 */}
    {console.log(students[0]?.fullName)}
    <h1>Student Assessments</h1>
    {/* 传递给子组件的时候也可以加判断，等数据加载完再渲染子组件 */}
    {students.length > 0 && <StudentList list={students} />}
  </div>
)

如果需要加加载提示，也可以额外设置一个isLoading状态控制加载态的展示。

React控制台调试方法 #

• 直接在return语句外打印state：你可以在组件函数体里、return之前加console.log('当前students值：', students)，可以在浏览器控制台看到state从空数组到拿到接口数据的两次更新过程
• 用React DevTools浏览器插件：安装后可以直接在浏览器开发者工具的Components面板里查看所有组件的state、props实时值，不需要手动写console语句
• 打断点：在浏览器开发者工具的Sources面板找到对应组件的代码，点击行号加断点，代码执行到对应位置会暂停，可以直接查看当前所有变量的值

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