编辑模式不显示 React 中的类属性

如何解决编辑模式不显示 React 中的类属性

我以一种形式同时进行了创建和编辑模式，但是当我尝试编辑元素时出现问题，我获得了正确的 id 值但无法检索属性值。

import { yupResolver } from "@hookform/resolvers/yup";
import { useState,useEffect } from "react";
import { useForm,SubmitHandler } from "react-hook-form";
import { useParams,useHistory,Link } from "react-router-dom";
import * as yup from "yup";
import {
  getChoice,postChoice,updateChoice,} from "../../../../api/remote.api";
import { CustomInput } from "../../../../components/lib";
import { Choice } from "../../../../models";

type Inputs = {
  displayMessage: string;
  value: string;
};

const schema = yup.object().shape({
  displayMessage: yup.string().min(5,"Au minimum 5 chars").required(),value: yup.string().min(5,"Au minimum 8 chars").required(),});

const NewChoice = () => {
  const { id } = useParams<{ id?: string }>();
  const isAddMode = !id;

  let history = useHistory();
  const [submitting,setSubmitting] = useState<boolean>(false);
  const [error,setError] = useState<string>();
  const {
    register,handleSubmit,setValue,formState: { errors },} = useForm<Inputs>({ resolver: yupResolver(schema) });

  const onSubmit: SubmitHandler<Inputs> = (data: Inputs) => {
    setSubmitting(true);
    const choice = new Choice({
      displayMessage: data.displayMessage,value: data.value,id: Number(id) ? Number(id) : -1,});

    submitForm(choice,id)
      .then((chc) => {
        setSubmitting(false);
        history.goBack();
      })
      .catch((e) => {
        const { message } = e.response.data;
        if (message) {
          setError(message);
        }
        setSubmitting(false);
      });
  };

  const submitForm = (choice: Choice,id?: string) => {
    return id ? updateChoice(Number(id!),choice) : postChoice(choice);
  };

  useEffect(() => {
    if (!isAddMode) {
      // get set form fields
      getChoice(Number(id))
        .then(
          (choice: Choice) => {
            setValue("displayMessage",choice.displayMessage);
            setValue("value",choice.value);
          },(error) => {
            history.push("/choices");
          }
        )
        .catch((e) => {
          console.log("error catch");
          console.log(e);
        });
    }
  },[id,isAddMode,history]);

  return (
    <div className="container m-1">
      <form
        className={`flex-column justify-content-center`}
        onSubmit={handleSubmit(onSubmit)}
      >
        <h1 className="h3 mb-3 fw-normal">Création d'un choix</h1>
        <CustomInput
          register={register}
          label="Message affiché"
          type="text"
          id="displayMessage"
          error={errors.displayMessage?.message}
          placeholder="display Message"
        />
        <CustomInput
          register={register}
          label="Valeur du choix"
          type="text"
          id="value"
          error={errors.value?.message}
          placeholder="Choice Value"
        />
        {error && <div className="invalid-Feedback d-block">{error}</div>}
        <Link to={"."} className="btn btn-small btn-warning mt-3 mr-2">
          Cancel
        </Link>
        <button
          className="btn btn-small btn-primary mt-3"
          type="submit"
          disabled={submitting}
        >
          {isAddMode ? "Création" : "Mise à jour"}
        </button>
      </form>
    </div>
  );
};

export default NewChoice;

我试图在堆栈和其他网站上查看一下，但无法解决这个 5 天的错误，结果我只得到一个带有适当 ID 的空白页面

并且元素应该在这个文件中。

export const CustomInput = ({
  register,label,type,id,error,placeholder,}: {
  register: any;
  label: string;
  placeholder: string;
  type: string;
  id: string;
  error?: string;
}) => {
  return (
    <>
      <label htmlFor={id}>{label}</label>
      <div className="form-floating">
        <input
          type={type}
          className="form-control"
          id={id}
          placeholder={placeholder}
          {...register(id)}
        />
        {error && <p className="invalid-Feedback d-block">{error}</p>}
      </div>
    </>
  );
};

解决方法

尝试新状态：

const [isToUpdate,setUpdate] = useState<boolean>(false);

将其添加到 useEffect 数组中：

[id,isToUpdate ....]

在 setValue("value",choice.value); 之后添加 setUpdate 到您设置值的位置

setUpdate(true);