TypeError：無法讀取未定義的屬性（讀取“屬性”）

Question

錯誤是下一個。

    TypeError: Cannot read properties of undefined (reading 'name')

      32 |           type="text"
      33 |           placeholder="Full Name"
    > 34 |           value={employee.name}
         |                           ^
      35 |           onChange={(e) => setEmployee({ ...employee, name: e.target.value })}
      36 |         />
      37 |       </div>

這是我試圖查看為什么沒有正確讀取屬性name的代碼。

import React, { useContext, useState } from "react";
import unid from "uniqid";
import { EmployeesContext } from "../context/EmployeesContext";
import { useNavigate, useParams } from "react-router-dom";

export const EditEmployee = ({ id }) => {
  const navigate = useNavigate();
  const params = useParams();

  id = params?.id;

  const { employees, setEmployees } = useContext(EmployeesContext);

  const [employee, setEmployee] = useState(
    employees.find(({ dni }) => dni === id)
  );

  const saveEmployee = (id, emp) => {
    setEmployees(
      employees.map((employee) =>
        employee.dni === id ? (employee = emp) : employee
      )
    );
    navigate("/");
  };

  return (
    <div className="add-employee">
      <div className="field">
        <label>Name</label>
        <input
          type="text"
          placeholder="Full Name"
          value={employee.name}
          onChange={(e) => setEmployee({ ...employee, name: e.target.value })}
        />
      </div>
      <div className="field">
        <label>DNI</label>
        <input
          type="text"
          placeholder="DNI"
          value={employee.dni}
          onChange={(e) => setEmployee({ ...employee, dni: e.target.value })}
        />
        <button
          onClick={() => {
            setEmployee({ ...employee, dni: "" });
            setEmployee({ ...employee, dni: unid().toUpperCase() });
          }}
        >
          Generate
        </button>
      </div>
      <div className="field">
        <label>Birth date</label>
        <input
          type="text"
          placeholder="DD/MM/YYYY"
          value={employee.birth}
          onChange={(e) => setEmployee({ ...employee, birth: e.target.value })}
        />
      </div>
      <div className="field">
        <label>Address</label>
        <input
          type="text"
          placeholder="Address"
          value={employee.address}
          onChange={(e) =>
            setEmployee({ ...employee, address: e.target.value })
          }
        />
      </div>
      <div className="field">
        <label>Phone</label>
        <input
          type="text"
          placeholder="Phone"
          value={employee.phone}
          onChange={(e) => setEmployee({ ...employee, phone: e.target.value })}
        />
      </div>
      <div className="field">
        <label>Email</label>
        <input
          type="text"
          placeholder="Email"
          value={employee.email}
          onChange={(e) => setEmployee({ ...employee, email: e.target.value })}
        />
      </div>
      <div className="field">
        <label>Position</label>
        <input
          type="text"
          placeholder="Position"
          value={employee.position}
          onChange={(e) =>
            setEmployee({ ...employee, position: e.target.value })
          }
        />
      </div>

      <div className="actions">
        <button onClick={() => saveEmployee(id, employee)}>Confirm</button>
        <button onClick={() => navigate("/")}>Cancel</button>
      </div>
    </div>
  );
};

我要執行的測試是下一個。 如果我的代碼我認為我在測試中提供的 id 正在尋找正確的員工，我不知道如何通過新員工，所以我希望你能幫助我澄清我在這里的失敗。

  // should render and save input position
  it("should render and save input position", () => {
    const wrapper = mount(
      <EmployeesContext.Provider value={{ employees, setEmployees }}>
        <EditEmployee id="MBJ34368V12P5" />
      </EmployeesContext.Provider>
    );
    const input = wrapper.find("#position");
    expect(input.props().value).toBe("Front-end Developer");
  });

這是我在測試用例中提供的數據。

const empData = [
  {
    name: "Jaime Armando Straus",
    address: "Los Angeles, CA",
    dni: "MBJ34368V12P5",
    birth: "19/03/1998",
    phone: "5628903455",
    email: "jaime.armando@aspiresys.com",
    position: "Front-end Developer",
  },
  {
    name: "Jose Armando Straus",
    address: "Washington, DC",
    dni: "NFIN3543543NKBN",
    birth: "19/03/1980",
    phone: "5628903455",
    email: "jose.armando@aspiresys.com",
    position: "Back-end Developer",
  },
];

export const employees = [...empData];
export const setEmployees = jest.fn();

Answer 1

useState參數是初始值。 在您的第一次渲染中，您使用react-router-dom中的useParams來提取id並從上下文提供的數組中找到員工。

因此，當未提供id時，您的employee值將未定義，因此您將收到錯誤消息。

您可以簡單地添加一個console.log來檢查employee對象中存在的值。

 const [employee, setEmployee] = useState(
    employees.find(({ dni }) => dni === id)
  );
 console.log({employee})

Answer 2

嘗試添加默認值。

const [employee, setEmployee] = useState(
    employees.find(({ dni }) => dni === id) || {}
  );