React项目EnrolList.js无法读取num属性的错误排查求助

1. Props传递的双重错误 #

在App.js调用EnrolList组件时，存在两个关键问题：

<EnrolList setStudentDetails={()=>setStudentDetails} studentDetail={()=>studentDetails}/>

• 属性名称不匹配：你传递的属性是studentDetail（单数），但在EnrolList组件中尝试访问的是props.studentDetails（复数），直接导致props.studentDetails为undefined，自然无法读取num属性。
• 错误包裹为函数：你把studentDetails状态和setStudentDetails更新函数都包裹成了箭头函数传递，导致EnrolList拿到的不是实际值和方法，而是返回它们的函数。正确写法应该是直接传递：

  <EnrolList setStudentDetails={setStudentDetails} studentDetails={studentDetails}/>
  

2. 初始状态未做空值判断 #

App.js中studentDetails的初始状态是空对象{}，组件第一次渲染时，EnrolList的useEffect会执行，此时props.studentDetails是空对象，直接访问props.studentDetails.num会触发读取未定义属性的错误。即使修复了props传递，也需要先做空值判断：

const curItemKey = props.studentDetails?.num; // 使用可选链操作符避免报错

3. 非React状态导致数据丢失 #

EnrolList中用let items = []存储学生列表，这是普通变量而非React状态。组件重新渲染时这个变量会被重置，无法持久化存储已注册的学生数据。应该改用useState管理列表：

const [items, setItems] = React.useState([]);

并在useEffect中正确更新状态：

React.useEffect(()=>{
    const curItemKey = props.studentDetails?.num;
    if(curItemKey){
        setItems(prevItems => [...prevItems, props.studentDetails]);
        props.setStudentDetails({});
    }
},[props.studentDetails, props.setStudentDetails]);

内容的提问来源于stack exchange，提问作者Ang Theow Meng