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

Question

在我的反应应用程序中，我有一个表格文件和另一个用于我的弹出模式，它应该由每个表格行中的编辑按钮激活。

每当我加载我的应用程序时，该应用程序都会引发指向我的模态文件的错误

**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}     
      />

至于我的模态文件，设置看起来像这样

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>

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

标签： javascriptreactjsreact-hooksreact-modal

Answer 1

另一种选择是使用解构具有默认值。

另一个问题是您没有将setStateas 道具传递给 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>)
}