Next.js中useState触发Too many re-renders无限重渲染报错

报错Error: Too many re-renders. React limits the number of renders to prevent an infinite loop的触发逻辑非常明确：

• 你在组件函数的顶层作用域直接写了状态更新调用setValid(true)，这段逻辑会在组件每次渲染时无条件执行
• 状态更新会触发React重新渲染组件，重渲染时又会再次执行顶层的setValid(true)，再次触发重渲染，形成无终止的更新循环，最终触发React的渲染次数保护机制

另外原代码还有两处冗余写法：

• 用map遍历做push操作完全没必要，map本身就会返回遍历结果组成的新数组，额外声明空数组再push属于重复逻辑
• 对session的判空赋值可以用更简洁的语法实现，不需要单独写if判断

根据你对valid状态的实际使用场景选对应写法即可： #

方案1：无需额外状态（推荐，性能最优） #

如果valid只是用来标识当前session邮箱是否在已申请列表里，后续不需要手动修改这个值，完全不需要用useState存储，直接在渲染时计算得出即可，依赖数据变化时值会自动同步：

// 直接提取邮箱数组，去掉冗余的空数组+push逻辑
const emailsApplied = candidatures.map(c => c.email)
// 用可选链+空值合并简化判空取值
const emailSession = session?.email ?? ''
// 直接计算得到校验值，无额外状态开销
const valid = emailsApplied.includes(emailSession)

方案2：状态初始值直接传入计算结果 #

如果后续业务逻辑需要手动修改valid的值（比如用户操作按钮切换校验状态、接口返回结果覆盖校验值），可以直接把计算逻辑作为useState的初始值传入，仅在组件首次挂载时执行一次计算，不会触发循环更新：

const emailsApplied = candidatures.map(c => c.email)
const emailSession = session?.email ?? ''
// 初始值直接传入计算结果，后续setValid调用不会触发循环
const [valid, setValid] = useState(emailsApplied.includes(emailSession))

方案3：用useEffect监听依赖同步状态 #

如果需要在candidatures或者session动态变化时，自动同步更新valid状态，把更新逻辑放到useEffect里，明确指定依赖项，仅在依赖变化时才执行状态更新：

const [valid, setValid] = useState(false)

const emailsApplied = candidatures.map(c => c.email)
const emailSession = session?.email ?? ''

useEffect(() => {
  setValid(emailsApplied.includes(emailSession))
// 声明依赖，仅当两个依赖值变化时才执行effect内的更新逻辑
}, [emailsApplied, emailSession])

• 永远不要在组件渲染阶段（函数体顶层、未被包裹的逻辑路径里）直接调用状态更新函数，这类调用必然会触发重渲染死循环。状态更新只能放在事件回调、useEffect/useLayoutEffect等副作用钩子、或者条件判断明确能阻断循环执行的路径里。
• 数组遍历时根据场景选合适的方法：要映射生成新数组用map，要判断是否存在符合条件的项用some，要遍历做副作用操作用forEach，不要混用方法增加冗余代码。

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