为什么 `formState.errors` 会执行多次？

问题：为什么[formState.errors](https://stackoverflow.com/a/78820591/23066581)执行多次？
回答：
当使用 React Hook Form 和 formState.errors 时，可能会触发多次重新渲染。例如，这可能会发生： 表单状态更新：每次交互或验证检查后，React Hook Form 都会更新表单状态。这些更新会触发组件的重新渲染。具体来说，每次检查验证规则后，或者发生错误设置时，React Hook Form 都会更新错误对象，然后触发组件的重新渲染。

React 的渲染行为：此外，由于其协调算法，重新渲染甚至可能由 React 本身触发。如果怀疑树中存在某种变化，React 实际上可以重新渲染组件。

开发模式行为：React 会进行额外的重新渲染以捕获错误或副作用。这可能是因为开发中的双重渲染行为检测副作用并确保组件保持纯净。

故障排除步骤：检查 onSubmit 是否被多次调用：确保 onSubmit 仅被调用一次。如果有多次提交，则会进行多次重新渲染。

优化渲染：

如果你的组件很复杂或者渲染逻辑非常昂贵，你应该避免不必要的重新渲染，可以使用 React.memo 或 useMemo。

React.memo 示例：

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

去抖动验证：如果表单验证导致多次更新，请考虑去抖动验证以减少状态更改和重新渲染的频率。

避免不必要的控制台日志：频繁的日志记录，例如 console.log("errors", error);，有时可能会导致感知到的多个渲染，尤其是在开发模式下。

确保没有严格模式：既然你提到你没有使用 React Strict 模式，这应该不是问题，但最好验证一下。

验证 React Hook Form 版本：确保您使用的是最新版本的 React Hook Form，因为错误或意外行为可能会在新版本中得到修复。

示例组件 这是经过细微优化的示例：

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);

由于React Hook Form更新表单状态的方式，甚至由于React本身的协调过程，会发生多次重新渲染。组件的优化和状态的处理实际上会减少甚至完全避免额外的重新渲染。如果这不起作用，请检查 React Hook Form 的存储库/文档中的更新或已知问题。

以上是为什么 `formState.errors` 会执行多次？的详细内容。更多信息请关注PHP中文网其他相关文章！