Mengapakah `formState.errors` dilaksanakan beberapa kali?

Soalan: Mengapakah [formState.errors](https://stackoverflow.com/a/78820591/23066581) dilaksanakan beberapa kali?
Answar:
Apabila menggunakan React Hook Form dan formState.errors, mungkin terdapat kemungkinan berbilang pemaparan semula sedang dicetuskan. Sebagai contoh, ini mungkin berlaku: Kemas Kini Keadaan Borang: Selepas setiap interaksi atau semakan pengesahan, Borang React Hook mengemas kini keadaan borang. Kemas kini ini berlaku untuk mencetuskan pemaparan semula komponen anda. Khususnya, selepas setiap kali peraturan pengesahan disemak atau jika tetapan ralat berlaku, React Hook Form akan mengemas kini objek ralat dan kemudian mencetuskan pemaparan semula komponen.

Gelagat pemaparan React: Selain itu, pemaparan semula mungkin dicetuskan oleh React sendiri kerana algoritma penyelarasannya. Jika ia mengesyaki bahawa terdapat perubahan tertentu dalam pepohon, React boleh memaparkan semula komponen secara praktikal.

Gelagat Mod Pembangunan: React melakukan pemaparan semula tambahan untuk menangkap pepijat atau kesan sampingan. Ia mungkin disebabkan oleh tingkah laku pemaparan dua kali dalam pembangunan untuk mengesan kesan sampingan dan memastikan komponen kekal tulen.

Langkah Penyelesaian Masalah: Semak Berbilang Panggilan onSubmit: Pastikan onSubmit dipanggil sekali sahaja. Jika terdapat berbilang penyerahan, ia akan melakukan berbilang pemaparan semula.

Mengoptimumkan Rendering:

Anda harus mengelakkan pemaparan semula yang tidak perlu, sama ada dengan menggunakan React.memo atau useMemo jika komponen anda rumit atau logik pemaparan sangat mahal.

Contoh dengan React.memo :

    const App = React.memo(() => {
  // ...existing code
});

Pengesahan Nyahlantun: Jika pengesahan borang menyebabkan berbilang kemas kini, pertimbangkan untuk nyahlantunkan pengesahan untuk mengurangkan kekerapan perubahan keadaan dan pemaparan semula.

Elakkan Log Konsol yang Tidak Diperlukan: Pengelogan yang kerap, seperti console.log("errors", errors);, kadangkala boleh menyumbang kepada persepsi berbilang pemaparan, terutamanya dalam mod pembangunan.

Pastikan Tiada Mod Ketat: Memandangkan anda menyebut anda tidak menggunakan Mod Ketat React, ini tidak sepatutnya menjadi isu, tetapi anda perlu mengesahkannya.

Sahkan Versi Borang React Hook: Pastikan anda menggunakan versi terkini Borang React Hook, kerana pepijat atau tingkah laku yang tidak dijangka mungkin diperbaiki dalam versi yang lebih baharu.

Contoh Komponen Berikut ialah contoh anda dengan pengoptimuman kecil:

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

type FormInputs = {
  firstName: string;
};

const App = React.memo(() => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormInputs>({
    defaultValues: {
      firstName: "",
    },
  });

  function onSubmit(data: FormInputs) {
    console.log("onSubmit", data);
  }

  console.log("errors", errors);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name</label>
      <br />
      <input type="text" {...register("firstName", { required: "First name is required" })} />
      <br />
      <input type="submit" />
    </form>
  );
});

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Berbilang pemaparan semula berlaku disebabkan oleh cara pengemaskinian Borang React Hook dalam keadaan bentuk, atau malah disebabkan oleh proses penyelarasan React itu sendiri. Pengoptimuman komponen dan pengendalian keadaan sebenarnya akan berkurangan atau sama sekali mengelakkan pemaparan semula tambahan. Jika ini tidak berjaya, semak kemas kini atau isu yang diketahui dalam repositori/dokumentasi Borang React Hook.

Atas ialah kandungan terperinci Mengapakah `formState.errors` dilaksanakan beberapa kali?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!