javascript - react-hook-form 返回寄存器不是函数错误

Question

所以我遇到了 react-hook-form 的问题。我有两种形式，它们的构建方式相同。一个正在工作，另一个正在返回错误。我找不到正确调试它的方法。当我从子组件中注释掉 ...register 行时，就可以了。否则我不知道发生了什么，因为我使用的第二种形式没有任何问题，并且它们在 div 中的包装是相同的。

import { useRouter } from "next/router";
import Card from "../../components/Card";
import Form from "../../components/Form/Form";
import Input from "../../components/Form/Input";
import InputCard from "../../components/Form/InputCard";
import InputSelect from "../../components/Form/InputSelect";
import { useNotification } from "../../context/errorContext";
import { useForm } from "react-hook-form";

import axios from "axios";

const ClientAdd = () => {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm();

  const [isHomeless, setIsHomeless] = useState(false);
  const [personalIdAllowed, setPersonalIdAllowed] = useState(true);

  const defaultOptions = [
    { value: "yes", text: "Jah" },
    { value: "ei", text: "Ei" },
    { value: "refuse", text: "Keeldus" },
  ];

  const defaultPrefilledOptions = [
    { value: "prefilled", text: "Eeltäidetud sihtrühma alusel" },
    { value: "asked", text: "Küsitud osaleja käest" },
  ];

  const { setNotifications, setNotificationVariant, clearNotifications } =
    useNotification();

  const router = useRouter();

  const submitForm = (e, data) => {
    e.preventDefault();
    console.log("submit", data);

    const headers = {
      Accept: "application/json",
      "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
    };

    axios({
      method: "post",
      url: "http://localhost:80/api/clients",
      data: JSON.stringify(data),
      headers: headers,
    })
      .then((response) => {
        clearNotifications();
        console.log("Status: ", response.status);
        console.log("Data: ", response.data);
        router.push("/clients/");
      })
      .catch((error) => {
        console.error("Something went wrong!", error.response);
        clearNotifications();
        setNotifications(error.response.data.errors);
        setNotificationVariant("danger");
      });
  };

  return (
    <div className="container py-10">
      <form onSubmit={handleSubmit(submitForm)}>
        <Card>
          <InputCard
            title="Isikuandmed"
            description="Lisa isikuandmed abivajale"
          >
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Input
                  label="Eesnimi"
                  id="name"
                  register={register}
                  required
                  error={errors}
                  errorMessage="Eesnimi on vajalik"
                />
              </div>
              <div>
                <Input
                  label="Perekonnanimi"
                  id="last_name"
                  register={register}
                  required
                  error={errors}
                  errorMessage="Eesnimi on vajalik"
                />
              </div>
              <div>
                <Input
                  label="Isikukood"
                  id="personal_id"
                  type="number"
                  register={register}
                  required={!personalIdAllowed ? "" : true}
                  error={errors}
                  errorMessage="Eesnimi on vajalik"
                />
                <div className="mt-4">
                  <input
                    type="checkbox"
                    name="allowPersonalId"
                    className="form-checkbox"
                    onChange={() => setPersonalIdAllowed(!personalIdAllowed)}
                  />
                  <label htmlFor="allowPersonalId">
                    Ei soovi isikukoodi avaldada
                  </label>
                </div>
              </div>
              <div>
                <InputSelect
                  label="Sugu"
                  options={[
                    { value: "m", text: "Mees" },
                    { value: "n", text: "Naine" },
                  ]}
                  id="sex"
                  register={register}
                  required
                  error={errors}
                  errorMessage="Eesnimi on vajalik"
                />
              </div>
              {!personalIdAllowed && (
                <div className="col-span-2">
                  <Input
                    label="Sünnikuupäev"
                    type="date"
                    id="date_of_birth"
                    register={register}
                    required
                    error={errors}
                    errorMessage="Eesnimi on vajalik"
                  />
                </div>
              )}
              <div>
                <Input label="Vanus" type="number" disabled />
              </div>
              <div>
                <Input
                  label="Telefon"
                  type="tel"
                  id="telephone"
                  register={register}
                  required
                  error={errors}
                  errorMessage="Eesnimi on vajalik"
                />
              </div>
              <div>
                <Input
                  label="E-posti aadress"
                  type="email"
                  id="email"
                  register={register}
                  required
                  error={errors}
                  errorMessage="Eesnimi on vajalik"
                />
              </div>
              <div>
                <InputSelect
                  label="Kohalik omavalitsus"
                  options={[
                    { value: 0, text: "Hiiu vald" },
                    { value: 1, text: "Saare" },
                    { value: 2, text: "Muu" },
                    { value: 3, text: "Saku vald" },
                  ]}
                  id="local_government"
                  register={register}
                  required
                  error={errors}
                  errorMessage="Eesnimi on vajalik"
                />
              </div>
              <div>
                <InputSelect
                  label="Maakond"
                  options={[
                    { value: 0, text: "Hiiumaa" },
                    { value: 1, text: "Saaremaa" },
                    { value: 2, text: "Pärnumaa" },
                    { value: 3, text: "Saku vald" },
                  ]}
                  id="county"
                  register={register}
                  required
                  error={errors}
                  errorMessage="Eesnimi on vajalik"
                />
              </div>
              <div className="flex items-center">
                <input
                  className="mr-2 form-checkbox"
                  type="checkbox"
                  onChange={() => setIsHomeless(!isHomeless)}
                />
                <label>Klient on kodutu</label>
              </div>
              <div></div>
              {isHomeless && (
                <div className="col-span-2">
                  <Input
                    label="Elukoht"
                    id="address"
                    register={register}
                    required
                    error={errors}
                    errorMessage="Eesnimi on vajalik"
                  />
                </div>
              )}
              <div>
                <InputSelect
                  label="Kõrgeim omandatud haridustase"
                  options={[
                    { value: 0, text: "Algharidus puudub" },
                    { value: 1, text: "Alg- või põhiharidus" },
                    { value: 2, text: "Üld- või kutseharidus" },
                    { value: 3, text: "Kõrgharidus" },
                  ]}
                  id="education_level"
                  register={register}
                  required
                  error={errors}
                  errorMessage="Eesnimi on vajalik"
                />
              </div>
            </div>
          </InputCard>
        </Card>
        {!personalIdAllowed && (
          <>
            <hr className="py-5" />
            <Card>
              <InputCard title="Ebasoodsas olukorras olevad osalejad">
                <div>
                  <InputSelect
                    label="Tegevuses osaleja – elab koos mittetöötavate leibkonnaliikmetega"
                    options={defaultOptions}
                    inline
                    id="is_living_with_unemployed"
                    register={register}
                    required
                    error={errors}
                    errorMessage="Eesnimi on vajalik"
                  />
                </div>
                <div>
                  <InputSelect
                    label="Tegevuses osaleja – elab koos ülalpeetavate laste ja mittetöötavate leibkonnaliikmetega"
                    id="is_living_with_unemployed_and_children"
                    options={defaultOptions}
                    inline
                    register={register}
                    required
                    error={errors}
                    errorMessage="Eesnimi on vajalik"
                  ></InputSelect>
                </div>
                <div>
                  <InputSelect
                    label="Tegevuses osaleja – elab ülalpeetavate laste ja ühe täiskasvanuga leibkonnas"
                    id="is_living_with_adult_and_children"
                    options={defaultOptions}
                    inline
                    register={register}
                    required
                    error={errors}
                    errorMessage="Eesnimi on vajalik"
                  ></InputSelect>
                </div>
                <div>
                  <InputSelect
                    label="Tegevuses osaleja – sisserändaja, teise riigi taustaga või rahvusvähemusse kuuluv"
                    id="is_immigrant_or_minority"
                    options={defaultOptions}
                    inline
                    register={register}
                    required
                    error={errors}
                    errorMessage="Eesnimi on vajalik"
                  ></InputSelect>
                </div>
                <div>
                  <InputSelect
                    label="Tegevuses osaleja – puue määratud"
                    id="is_disabled"
                    options={defaultOptions}
                    inline
                    register={register}
                    required
                    error={errors}
                    errorMessage="Eesnimi on vajalik"
                  ></InputSelect>
                </div>
                <div>
                  <InputSelect
                    label="Tegevuses osaleja – muu ebasoodne olukord"
                    id="other_unfavorable_condition"
                    options={defaultOptions}
                    inline
                    register={register}
                    required
                    error={errors}
                    errorMessage="Eesnimi on vajalik"
                  ></InputSelect>
                </div>
              </InputCard>
            </Card>
          </>
        )}

        <hr className="py-5" />
        <Card>
          <InputCard title="Tegevustega seotud andmed">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Input
                  type="date"
                  label="Tegevuse alustamise kuupäev"
                  id="beginning_of_activities"
                  register={register}
                  required
                  error={errors}
                  errorMessage="Eesnimi on vajalik"
                />
              </div>
              <div>
                <Input
                  type="date"
                  label="Tegevuse lõpetamise kuupäev, sh katkestamise"
                  id="end_of_activities"
                  register={register}
                  required
                  error={errors}
                  errorMessage="Eesnimi on vajalik"
                />
              </div>
              <div>
                {/* <Input label="Tegevuse katkestaja" /> */}
                <p>Tegevuse katkestaja</p>
                <div>
                  <InputSelect
                    label="Tegevuses osaleja – muu ebasoodne olukord"
                    id="end_of_activities_initiator"
                    options={defaultOptions}
                    inline
                    register={register}
                    required
                    error={errors}
                    errorMessage="Eesnimi on vajalik"
                  ></InputSelect>
                </div>
              </div>
            </div>
          </InputCard>
        </Card>
        <hr className="py-5" />
        <Card>
          <InputCard title="Õppimine ja osalemine kursustel tegevusega liitumisel">
            <div className="">
              <InputSelect
                label="Õppimine ja osalemine kursustel tegevusega liitumisel"
                id="is_taking_courses_when_joining"
                inline
                options={defaultOptions}
                register={register}
                required
                error={errors}
                errorMessage="Eesnimi on vajalik"
              />
            </div>
            <div className="">
              <InputSelect
                label="Õppimine ja osalemine kursustel tegevusega liitumisel: eeltäidetud sihtrühma alusel või küsitud"
                id="is_taking_courses_when_joining_prefilled"
                inline
                options={defaultPrefilledOptions}
                register={register}
                required
                error={errors}
                errorMessage="Eesnimi on vajalik"
              />
            </div>
          </InputCard>
        </Card>
        <hr className="py-5" />
        <Card>
          <InputCard title="Tööhõive staatus tegevusega liitumisel">
            <div>
              <InputSelect
                label="Tööhõive staatus tegevusega liitumisel"
                id="is_working"
                inline
                options={[
                  { value: null, text: null },
                  { value: "working", text: "Töötav, sh FIE" },
                  {
                    value: "unemployed_short_term",
                    text: "Töötu (kuni 12 kuud)",
                  },
                  {
                    value: "unemployed_long_term",
                    text: "Pikaajaline töötu (üle 12 kuu)",
                  },
                  { value: "not_active", text: "Mitteaktiivne" },
                  { value: "refused", text: "Keeldumine" },
                ]}
                register={register}
                required
                error={errors}
                errorMessage="Eesnimi on vajalik"
              />
            </div>
            <div>
              <InputSelect
                label="Tööhõive staatus tegevusega liitumisel: eeltäidetud sihtrühma alusel või küsitud"
                id="is_working_prefilled"
                inline
                options={defaultPrefilledOptions}
                register={register}
                required
                error={errors}
                errorMessage="Eesnimi on vajalik"
              />
            </div>
          </InputCard>
        </Card>

        <hr className="py-5" />
        <Card>
          <InputCard title="Kliendi nõusolek ja sobivus">
            <div className="grid grid-cols-1 gap-4">
              <div>
                <Input
                  label="Kliendi sobivuse põhjendus"
                  id="acceptance_description"
                  register={register}
                  required
                  error={errors}
                  errorMessage="Eesnimi on vajalik"
                />
              </div>
              <div>
                <Input
                  label="Klient viibib hoolekandeasutuses"
                  id="is_in_care_institution"
                  register={register}
                  required
                  error={errors}
                  errorMessage="Eesnimi on vajalik"
                />
              </div>
            </div>
          </InputCard>
        </Card>
        <div className="flex justify-center py-5 space-x-4">
          <button className="bg-green-400 py-4 px-6" type="submit">
            Salvesta
          </button>
          <button
            className="bg-red-400 py-4 px-6"
            onClick={() => router.push("/dashboard")}
          >
            Katkesta
          </button>
        </div>
      </form>
    </div>
  );
};

export default ClientAdd;

不管用

子组件代码：

  label,
  id,
  type = "text",
  half = true,
  disabled,
  register,
  required,
  error,
  errorMessage,
}) => {
  return (
    <>
      <label
        htmlFor={id}
        className={`block text-sm font-medium text-gray-700 ${
          disabled && "opacity-50"
        }`}
      >
        {label}
      </label>
      <input
        type={type}
        name={id}
        id={id}
        autoComplete="given-name"
        disabled={disabled}
        {...register(id, { required, message: errorMessage })}
        className={`mt-1 ${
          error ?? "ring-red-500"
        } focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md ${
          half && "w-1/2"
        }`}
      />
    </>
  );
};

export default Input;

和错误

还有其他形式是相同的并且工作正常

标签： javascriptreactjsreact-hook-form