React中useState引发无限循环问题求助：表单提交切换组件时出现过多重渲染报错

嘿，我来帮你分析下这个无限循环的问题～

首先，咱们先定位核心原因：你的代码里有两个可能触发无限循环的点，最常见的是表单默认提交行为没被及时阻止，另一个可能是自定义Form组件的实现问题。

问题拆解 #

1. 默认提交行为的顺序错误
   你在提交回调里先调用了setShowPage(false)，之后才执行e.preventDefault()。但表单的默认提交行为（刷新页面）会在回调执行过程中优先触发，页面刷新后你的组件会重新挂载，showPage会被重置为初始值true，接着又渲染表单，如此反复就形成了无限循环。

2. 自定义Form组件的执行逻辑错误
   如果你用的是自己写的<Form>或<FormContent>组件，要是内部把onSubmit属性写成了立即执行函数（比如props.onSubmit()而不是props.onSubmit），那每次组件渲染时都会直接触发你的提交回调，调用setShowPage(false)，进而引发「状态更新→组件重渲染→再次执行回调」的无限循环。

修复方案 #

方案一：调整阻止默认行为的顺序

把e.preventDefault()放在回调的最开头，确保表单不会触发页面刷新：

<Form onSubmit={ handleSubmit((data, e) => {
  try {
    e.preventDefault(); // 先阻止默认提交，这是关键！
    console.log(data);
    setShowPage(false);
    // submit(data);
  } catch (err) {
    console.log(err);
  }
})}>

方案二：检查自定义Form组件的实现

如果是自定义Form组件的问题，确认它的onSubmit是传递函数引用而非立即执行：
❌ 错误写法（会立即执行回调）：

function Form(props) {
  return <form onSubmit={props.onSubmit()}>{props.children}</form>
}

✅ 正确写法（仅在提交时执行）：

function Form(props) {
  return <form onSubmit={props.onSubmit}>{props.children}</form>
}

额外小提示

如果以上修复后还有问题，可以检查下register的调用是否传递了动态生成的对象（比如每次渲染都新建的规则对象），这种情况可以用useMemo包裹来避免不必要的重渲染，但这不是你当前循环的主要原因。

内容的提问来源于stack exchange，提问作者sam smith