React报错：Cannot read properties of undefined (reading 'id') 求助

你的代码存在几个明确的错误，直接导致了这个undefined报错，以下是问题分析和修正方案：

核心错误点 #

1. Props传递不匹配：你在MidStudentList中给卡片组件传的是value={studentData}，但MidStudentCard接收的参数是student，导致组件里的student为undefined，自然读不到id。
2. 直接访问数组的对象属性：studentData是数组，你直接写studentData.id，数组本身没有这个属性，必然返回undefined。
3. 未遍历学生数组：你只渲染了一个卡片组件，没有循环遍历studentData生成每个学生的卡片，反而把整个数组传给了单个卡片。
4. 状态初始值类型混乱：showDetails是把单个学生对象存入状态，但初始状态设成了整个学生数组，导致后续类型不匹配。

修正后的代码 #

MidStudentList.js #

import React, { useState } from 'react';
import MidStudentCard from './MidStudentCard';
import './MidStudentList.css';

const studentData = [
  { id: 1, name: 'Sam', department:'ComputerSoftware', desc: 'This guy coding very well' },
  { id: 2, name: 'John', department: 'DronePicture', desc: 'He is expert about taking picture to drones' }
];

const MidStudentList = () => {
  // 初始状态设为第一个学生，若不想默认显示可改为null
  const [selectedStudent, setSelectedStudent] = useState(studentData[0]);
  
  const showDetails = (student) => {
    setSelectedStudent(student);
  };

  return (
    <div className="student-list-container">
      <h1 className="title">Title</h1>
      <div className="student-details">
        <h2>Student Information</h2>
        {/* 用可选链防止selectedStudent为null时报错 */}
        <p>Id: {selectedStudent?.id}</p>
        <p>Name: {selectedStudent?.name}</p>
        <p>Department: {selectedStudent?.department}</p>
        <p>Description: {selectedStudent?.desc}</p>
      </div>
      <div className="student-list">  
        {/* 遍历数组生成每个学生卡片，key用唯一id */}
        {studentData.map(student => (
          <MidStudentCard 
            key={student.id}
            student={student}  // 统一props名称和组件接收参数
            showDetails={showDetails}
          />
        ))}
      </div>
    </div>
  );
};

export default MidStudentList;

MidStudentCard.js #

import React from 'react';

const MidStudentCard = ({ student, showDetails }) => {
  return (
      <div className="student-card">
        {/* 可选链增强健壮性，防止意外undefined */}
        <p><strong>ID:</strong> {student?.id}</p>
        <p><strong>Name:</strong> {student?.name}</p>
        <p><strong>Department:</strong> {student?.department}</p>
        <button className="view-button" onClick={() => showDetails(student)}>View</button>
      </div> 
  );
};

export default MidStudentCard;

修改说明 #

1. 统一Props名称：将传递给卡片组件的value改为student，确保组件能正确接收学生对象。
2. 遍历数组渲染：用studentData.map()循环生成每个学生的卡片，同时设置唯一key符合React列表渲染要求。
3. 修正状态逻辑：将初始状态改为单个学生对象，详情区域改为读取状态中的selectedStudent，点击View按钮可切换显示对应学生信息。
4. 添加可选链：在访问对象属性时使用?.，避免因状态为null或undefined导致报错，增强代码健壮性。

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