React-如何解决属性未定义的问题

Question

在我的react应用程序中，我有一个Tables文件和另一个用于弹出的Modal的文件，该文件应该由每个表行中的编辑按钮激活。

每当我加载应用程序时，应用程序都会抛出一个错误，指向我的Modal文件

**TypeError: Cannot read property 'name' of undefined** 
23 | <Label for="title">Name</Label>
24 | <Input
25 |   id="name"
> 26 |   value={props.editEmployeeData.name}
| ^  27 |   onChange={(e) => {
28 |     let { editEmployeeData } = props; // destructuring assignment
29 |     editEmployeeData.name = e.target.value;

我试图找到一个解决办法，但什么都不管用。

我的表格组件看起来像这个

const EmployeeTable = () => {
const [state, setState] = React.useState({
employeesDetail: [],
editEmployeeData: {
id: "",
name: "",
phone_no: "",
email: "",
department: "",
job_title: "",
salary: "",
date_employed: "",
},
editEmployeeModal: false,
});
const _refreshBooks = ()=>{
axios
.get("http://localhost:8000/api/accounts/employees_hr/")
.then((response) =>
setState({
employeesDetail: response.data.results,
})
);
}
useEffect(() => {
_refreshBooks();
}, []);
// modal appear/disappear func
const toggleEditEmployeeModal = () => {
setState({
editEmployeeModal: !state.editEmployeeModal,
});
};
// Populate Edit book func - 'Edit button'
const editEmployeeData = (id, name, phone_no, email, department, job_title, salary, date_employed) =>{
setState({
editEmployeeData: {id, name, phone_no, email, department, job_title, salary, date_employed}, 
editEmployeeModal: !state.editEmployeeModal
})
}
// Edit func - 'Update Book button'
const updateRecord=()=>{
let {
name,
phone_no,
email,
department,
job_title,
salary,
date_employed,
} = state.editEmployeeData;
axios
.put(
"http://localhost:8000/api/accounts/employees_hr/" +
state.editEmployeeData.id,
{
name,
phone_no,
email,
department,
job_title,
salary,
date_employed,
}
)
.then((response) => 
_refreshBooks()
);
// close modal after edit and set the 'editEmployeeData' fields to empty
setState({
editBookModal: false,
editEmployeeData: {
id: "",
name: "",
phone_no: "",
email: "",
department: "",
job_title: "",
salary: "",
date_employed: "",
} //clear
});
}
const classes = useStyles();
const columns = [
// "id",
{ name: "name", label: "Name" },
{ name: "phone_no", label: "Contact" },
{ name: "email", label: "Email" },
{ name: "department", label: "Department" },
{ name: "job_title", label: "Title" },
{ name: "salary", label: "Salary" },
{ name: "date_employed", label: "Date Employed" },
{
name: "Action",
options: {
filter: true,
sort: false,
empty: true,
customBodyRender: (value, tableMeta, updateValue) => {
const i = tableMeta.rowIndex;
const data = state.employeesDetail;
return (
// open modal
<Button
color="success"
size="sm"
onClick={() =>
editEmployeeData(
data[i].id,
data[i].name,
data[i].phone_no,
data[i].email,
data[i].department,
data[i].job_title,
data[i].salary,
data[i].date_employed,
)
}
>
Edit
</Button>
);
},
},
},
];
return (
<div className={classes.root}>
{/* EDIT BOOK MODAL */}
<EditEmployeeModal
editEmployeeModal={state.editEmployeeModal}
editEmployeeData={state.editEmployeeData}
updateRecord={updateRecord}  
toggleEditEmployeeModal={toggleEditEmployeeModal}     
/>

至于我的Modal文件，设置看起来像这个

const EditEmployeeModal = (props) => {
return (
<div className="App container">
<Modal isOpen={props.editEmployeeModal}>
<ModalHeader toggle={props.toggleEditEmployeeModal}>
Update Employee Record
</ModalHeader>
<ModalBody>
<FormGroup>
<Label for="title">Name</Label>
<Input
id="name"
value={props.editEmployeeData.name}
onChange={(e) => {
let { editEmployeeData } = props; // destructuring assignment
editEmployeeData.name = e.target.value;
props.setState({ editEmployeeData });
}}
/>
</FormGroup>

根据上面的代码设置，我遗漏了什么或做错了什么？

Answer 1

一个简单的方法是检查是否首先定义了它，所以：

UPDATE：您将希望使其成为一个受控组件，其中value道具表示当前值，onChange作为道具传递以更新指定为props.editEmployeeData.name的值。

请参阅"；什么是React受控部件和非受控部件；具体

在您的情况下，传递给onChange处理程序的函数看起来像这样：

onChange = (e) => {
const newValue = e.target.value // result of what is typed in the Input
// ... update the state of the respective variable
}

此外，一个很好的方法是使用新的(ish(可选链接语法：

<Input
id="name" value={ props?.editEmployeeData?.name } 
onChange={ props.onChange }
// ...
/>

Answer 2

另一个选项是使用具有默认值的析构函数。

另一个问题是您没有将setState作为道具传递给Modal

const EditEmployeeModal = (props) => {
const { editEmployeeData: { name = "" } = {} } = props;
return (
<div className="App container">
<Modal isOpen={props.editEmployeeModal}>
<ModalHeader toggle={props.toggleEditEmployeeModal}>
Update Employee Record
</ModalHeader>
<ModalBody>
<FormGroup>
<Label for="title">Name</Label>
<Input
id="name"
value={name}
onChange={(e) => {
let { editEmployeeData } = props; // destructuring assignment
editEmployeeData.name = e.target.value;
props.setState({ editEmployeeData });
}}
/>
</FormGroup>
</ModalBody>
</Modal>
</div>)
}