未捕獲的類型錯誤：無法設置未定義的屬性（設置“全名”）

Question

我收到一個錯誤，我不確定為什么會收到它...它說問題出在 handleSubmit 內部。 如果問題出在obj.full_name = name; 那為什么像obj.email = email; 任何幫助，將不勝感激：）

import React, { useState, useEffect } from "react";
import JSONDATA from "../data/MOCK_DATA.json";
import { useNavigate } from "react-router-dom";

const Edit = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [role, setRole] = useState("");
  const [location, setLocation] = useState("");
  const [id, setId] = useState("");

  let navigate = useNavigate();

  var index = JSONDATA.map((e) => {
    return e.id;
  }).indexOf(id);

  const handleSubmit = (e) => {
    e.preventDefault();

    let obj = JSONDATA[index];

    obj.full_name = name;
    obj.email = email;
    obj.role = role;
    obj.location = location;

    navigate("/");
  };

  useEffect(() => {
    setId(localStorage.getItem("id"));
    setName(localStorage.getItem("name"));
    setEmail(localStorage.getItem("email"));
    setRole(localStorage.getItem("role"));
    setLocation(localStorage.getItem("location"));
  }, []);

  //

  return (
    <div className="w-full h-[45rem] max-w-[1500px] mx-auto">
      <h1 className="flex justify-center items-center text-3xl pt-[7rem] font-semibold text-orange-600 mx-auto">
        Edit a new listing
      </h1>
      <form
        className="gap-10 flex h-full flex-col mx-auto justify-center items-center"
        onSubmit={handleSubmit}
      >
        <input
          className=" bg-gray-200 my-2 px-4 rounded-2xl shadow-xl"
          placeholder="Full Name"
          type="text"
          id="name"
          name="name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />

        <input
          className=" bg-gray-200 my-2 px-4 rounded-2xl shadow-xl"
          placeholder="Email"
          type="email"
          id="email"
          name="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />

        <input
          className=" bg-gray-200 my-2 px-4 rounded-2xl shadow-xl"
          placeholder="Role"
          type="text"
          id="role"
          name="role"
          value={role}
          onChange={(e) => setRole(e.target.value)}
        />

        <input
          className=" bg-gray-200 my-2 px-4 rounded-2xl shadow-xl"
          placeholder="Location"
          type="text"
          id="location"
          name="location"
          value={location}
          onChange={(e) => setLocation(e.target.value)}
        />

        <button
          className="my-2 px-4 py-3 bg-blue-300 active:bg-blue-500 rounded-2xl shadow-xl"
          type="submit"
          onSubmit={handleSubmit}
        >
          Update
        </button>
      </form>
    </div>
  );
};

export default Edit;

Answer 1

這是因為當組件第一次求值時，這些代碼行會立即運行：

var index = JSONDATA.map((e) => {
  return e.id;
}).indexOf(id);

初始id是 useState 中默認設置的"" 。 因此，如果id === ""那么indexOf("")是未定義的，您正試圖為其賦值。 該錯誤僅發生在第一個賦值中，因為它拋出錯誤並且反應阻止了 rest 代碼的運行。

確保在handleSubmit聲明之前運行useEffect掛鈎。 還要獲得模擬數據的正確index ，將其包裝在useMemo中，如下所示：

const index = useMemo(() => JSONDATA.map((e) => e.id).indexOf(id), [id]);

這將在 state 中的id更改時更新。

考慮為您的代碼添加一些類型安全，因為只要您的 localStorage 數據不可用或您的模擬數據將為空，則該index可能是未定義的。 這就是為什么我還要在handleSubmit function 中的let obj中添加一些條件：

// I wrapped also this function in useCallback to make sure the 'index' will be always up to date

const handleSubmit = useCallback(e => {
   e.preventDefault();

   // you can use const as objects are mutable
   const obj = JSONDATA[index] || {}; // this will make sure there will be an object

   obj.full_name = name;
   obj.email = email;
   obj.role = role;
   obj.location = location;

   navigate('/');
}, [index]);