默認情況下，如何將 json 中的值放入輸入？

Question

在我的 React 組件中

import React, { useEffect, useState } from "react";
import { useParams } from "react-router";
import { NavLink } from "react-router-dom";

import "./styles/editIntern.sass";

const EditIntern = () => {
  const { id } = useParams();
  const [intern, setIntern] = useState([]);
  const [name, inputName] = useState("");
  const [email, inputEmail] = useState("");
  const [start, inputStart] = useState("");
  const [end, inputEnd] = useState("");

  const [errorNameEmpty, isErrorNameEmpty] = useState(false);
  const [errorEmailValid, iserrorEmailValid] = useState(false);
  const [errorStartEmpty, isErrorStartEmpty] = useState(false);
  const [errorEndEmpty, isErrorEndEmpty] = useState(false);

  const validEmail = new RegExp(
    /(\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)/gm
  );

  const onFormSubmit = (e) => {
    e.preventDefault();
    let startDate = new Date(start).getTime();
    let endDate = new Date(end).getTime();

    if (startDate > endDate) {
      console.log("Start > end");
      console.log(startDate);
      console.log(endDate);
    } else {
      console.log("Ok");
      console.log(startDate);
      console.log(endDate);
    }
  };

  useEffect(() => {
    const fetchIntern = async () => {
      const response = await fetch(`http://localhost:3001/interns/${id}`);
      const intern = await response.json();
      setIntern(intern);
    };
    fetchIntern();
    console.log(`I want to get intern with id: ${id}!`);
  }, [id]);

  return (
    <div className="container">
      <img className="Logo" src="../logo.svg" alt="logo" />
      <section className="EditIntern">
        <NavLink to="/">
          <button className="EditIntern_back">
            <img
              className="EditIntern_back-img"
              src="../button_back_icon.svg"
              alt="button_back"
            />{" "}
            Back to list
          </button>
        </NavLink>
        <form className="EditIntern_form">
          <h4 className="EditIntern_form-title">Edit</h4>
          <label className="EditIntern_form-label EditIntern_form-label_name">
            Full name *
          </label>
          <input
            className="EditIntern_form-input EditIntern_form-input_name"
            type="text"
            name="name"
            value={name}
            onChange={(e) => {
              if (e.target.value === "") {
                isErrorNameEmpty(true);
              } else {
                isErrorNameEmpty(false);
              }
              inputName(e.target.value);
            }}
          />
          {errorNameEmpty ? (
            <span className="EditIntern_form-error EditIntern_form-error_name">
              Name can't be empty
            </span>
          ) : (
            <></>
          )}

          <label className="EditIntern_form-label EditIntern_form-label_email">
            Email address *
          </label>
          <input
            className="EditIntern_form-input EditIntern_form-input_email"
            type="text"
            name="email"
            value={email}
            onChange={(e) => {
              if (e.target.value === "") {
                iserrorEmailValid(true);
              } else if (!validEmail.test(e.target.value)) {
                iserrorEmailValid(true);
              } else {
                iserrorEmailValid(false);
              }
              inputEmail(e.target.value);
            }}
          />
          {errorEmailValid ? (
            <span className="EditIntern_form-error EditIntern_form-error_email">
              Example: email@gmail.com
            </span>
          ) : (
            <></>
          )}

          <label className="EditIntern_form-label EditIntern_form-label_start">
            Internship start *
          </label>
          <input
            className="EditIntern_form-input EditIntern_form-input_start"
            type="date"
            name="email"
            value={start}
            onChange={(e) => {
              if (!isNaN(e.target.valueAsNumber))
                inputStart(e.target.valueAsNumber);
              if (e.target.value === "") {
                isErrorStartEmpty(true);
              } else {
                isErrorStartEmpty(false);
              }
            }}
          />
          {errorStartEmpty ? (
            <span className="EditIntern_form-error EditIntern_form-error_start">
              Start date can't be empty
            </span>
          ) : (
            <></>
          )}

          <label className="EditIntern_form-label EditIntern_form-label_end">
            Internship end *
          </label>
          <input
            className="EditIntern_form-input EditIntern_form-input_end"
            type="date"
            name="email"
            value={end}
            onChange={(e) => {
              if (!isNaN(e.target.valueAsNumber))
                inputEnd(e.target.valueAsNumber);
              if (e.target.value === "") {
                isErrorEndEmpty(true);
              } else {
                isErrorEndEmpty(false);
              }
            }}
          />
          {errorEndEmpty ? (
            <span className="EditIntern_form-error EditIntern_form-error_end">
              End date can't be empty
            </span>
          ) : (
            <></>
          )}

          <input
            className="EditIntern_form-submit"
            type="submit"
            value="Submit"
            onClick={onFormSubmit}
          />
        </form>
      </section>
    </div>
  );
};

export default EditIntern;

當調用此組件時，我需要用 intern 數組中的值填充輸入（intern.name，intern.email ...）現在使用 useState 輸入默認為空。 默認情況下，我需要來自實習生的數據，但可以根據需要擦除和填寫。

正如我已經寫過的，intern 是一個數組，其中包含打開此組件時呈現的數據，它具有默認需要放置的所有數據。

Answer 1

如果我沒看錯的話，問題在於你沒有從 array intern 獲取數據，你只是從名稱 email 等獲取數據。

所以在開始時將諸如 intern.name 之類的值設置為 name 等。

之后你可以使用將它保存在數組中

setIntern({name: name, ...intern})

並繼續使用其他參數