为什么 `formStateerrors` 会执行多次？

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《为什么 `formStateerrors` 会执行多次？》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

问题：为什么 [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 严格模式，这应该不是问题，但最好验证一下。

验证 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({
    defaultValues: {
      firstName: "",
    },
  });

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

  console.log("errors", errors);

  return (
    

      First Name
      

      
      

      
    
  );
});

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

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

理论要掌握，实操不能落！以上关于《为什么 `formStateerrors` 会执行多次？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！