React中解决TypeError: Cannot read property 'name' of undefined问题

这个错误的核心原因有几个，咱们一步步拆解解决：

1. useState 的 setState 会完全替换状态对象，而非自动合并 #

在你的 EmployeeTable 组件里，_refreshBooks 函数的 setState 只更新了 employeesDetail，这会直接把初始状态里的 editEmployeeData 和 editEmployeeModal 覆盖成 undefined——这就是为什么模态框加载时会报Cannot read property 'name' of undefined的根本原因！

// 错误写法：丢失其他状态属性
axios.get("http://localhost:8000/api/accounts/employees_hr/")
  .then((response) => setState({ employeesDetail: response.data.results }));

修复：使用函数式更新，手动合并原有状态：

// 正确写法：保留原有状态，只更新需要修改的部分
axios.get("http://localhost:8000/api/accounts/employees_hr/")
  .then((response) => setState(prevState => ({
    ...prevState,
    employeesDetail: response.data.results
  })));

同样的问题也出现在 toggleEditEmployeeModal 和 updateRecord 里，比如 toggleEditEmployeeModal 之前的写法会丢掉 employeesDetail 和 editEmployeeData，必须改成合并状态的写法：

const toggleEditEmployeeModal = () => {
  setState(prevState => ({
    ...prevState,
    editEmployeeModal: !prevState.editEmployeeModal
  }));
};

2. 子组件不能直接修改 props，也无权调用父组件的 setState #

在 EditEmployeeModal 里，你直接修改了 props.editEmployeeData，还试图调用 props.setState——这两个操作都是违反 React 单向数据流原则的：

• 子组件不能直接修改父组件传过来的 props
• setState 是父组件内部的函数，你没把它传给子组件，所以 props 里根本没有这个方法

修复：

1. 在父组件 EmployeeTable 里新增一个更新 editEmployeeData 的回调函数，传给子组件
2. 子组件通过这个回调通知父组件更新状态

父组件新增函数：

const updateEditEmployeeData = (updatedData) => {
  setState(prevState => ({
    ...prevState,
    editEmployeeData: updatedData
  }));
};

然后把这个函数传给 EditEmployeeModal：

<EditEmployeeModal 
  editEmployeeModal={state.editEmployeeModal} 
  editEmployeeData={state.editEmployeeData} 
  updateRecord={updateRecord} 
  toggleEditEmployeeModal={toggleEditEmployeeModal}
  updateEditEmployeeData={updateEditEmployeeData} // 新增这个props
/>

子组件修改 Input 的 onChange 逻辑：

<Input 
  id="name" 
  value={props.editEmployeeData.name} 
  onChange={(e) => {
    // 先复制一份数据，避免直接修改props
    const updatedData = { ...props.editEmployeeData, name: e.target.value };
    // 通过父组件传的回调更新状态
    props.updateEditEmployeeData(updatedData);
  }} 
/>

3. updateRecord 里的笔误 #

你在 updateRecord 里写了 setState({ editBookModal: false, ... })，这里明显是笔误，应该是 editEmployeeModal：

// 错误
setState({ editBookModal: false, ... });
// 正确
setState(prevState => ({
  ...prevState,
  editEmployeeModal: false,
  editEmployeeData: { id: "", name: "", phone_no: "", email: "", department: "", job_title: "", salary: "", date_employed: "" }
}));

4. 可选：添加初始渲染的安全防护 #

为了避免类似的 undefined 错误，你可以在子组件里用可选链操作符做一层防护，确保即使数据未加载也不会报错：

value={props.editEmployeeData?.name || ""}

把这些修复点整合后，你的代码就能正常运行了。核心要记住：useState 的 setState 不会自动合并状态，必须手动处理；子组件要通过回调修改父组件状态，不能直接操作 props。

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