React 无法读取未定义的属性（读取“id”）

Question

未找到 React id 属性

我正在做复制编码以学习如何编码。但错误不断发生。错误说我的 id 属性未定义。我该如何解决这个问题？我尝试更改数组的名称、数组？.值。我发送我的代码和错误页面。

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 = () => {

  const [selectedStudent, setSelectedStudent] = useState(studentData);
  const showDetails = (student) => {
    setSelectedStudent(student);
  };
  return (
    <div className="student-list-container">
      <h1 className="title">Title</h1>
      <div className="student-details">
        <h2>Student Information</h2>
        <p>Id: {studentData.id}</p>
        <p>Name: {studentData.name}</p>
        <p>Department: {studentData.department}</p>
        <p>Description {studentData.desc}</p>
      </div>
      <div className="student-list">  
        <MidStudentCard 
          key={studentData.id}
          value={studentData}
          showDetails={showDetails}
        />
        </div>
    </div>
  );
};

export default MidStudentList;

import React from 'react';

const MidStudentCard = ({student,showDetails}) => {
    console.log(student);
  return (
      <div className="student-card" key={student.id}>
        <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;

错误页面

Answer 1

您将得到一个

undefined

，因为

studentData

是一个数组，而不是单个对象。

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

const studentData = [
  { id: 1, name: 'Sam', department:'ComputerSoftware', desc: 'This guy codes very well' },
  { id: 2, name: 'John', department: 'DronePicture', desc: 'He is an expert in drone photography' }
];

const MidStudentList = () => {
  const [selectedStudent, setSelectedStudent] = useState(null);

  const showDetails = (student) => {
    setSelectedStudent(student);
  };

  return (
    <div className="student-list-container">
      <h1 className="title">Title</h1>

      {/* Show selected student details */}
      {selectedStudent && (
        <div className="student-details">
          <h2>Student Information</h2>
          <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">  
        {/* Map through studentData array to display each student card */}
        {studentData.map((student) => (
          <MidStudentCard 
            key={student.id}
            student={student}
            showDetails={showDetails}
          />
        ))}
      </div>
    </div>
  );
};

export default MidStudentList;