React自定义Hook触发Too many re-renders错误求助

问题根源 #

你遇到的无限渲染是因为在useValidate Hook的函数体中直接调用了setIsValid。React组件（包括自定义Hook）每次渲染时都会执行函数体代码，而setIsValid会触发组件状态更新，状态更新又会引发新一轮渲染，形成无限循环。

修正方案 #

方案1：直接返回计算结果（推荐，更高效） #

不需要在Hook里维护isValid状态，直接根据传入的formData同步计算校验结果即可：

function useValidate(formData) {
    // 校验逻辑：只要任一必填项为空就返回false
    return formData.fName !== '' && formData.lName !== '';
}

export default useValidate

方案2：使用useEffect监听formData变化（若需状态记录） #

如果确实需要维护校验状态（比如要跟踪校验状态的变化时机），用useEffect包裹校验逻辑，只有当formData变化时才更新状态：

import { useState, useEffect } from 'react'

function useValidate(formData) {
    const [isValid, setIsValid] = useState(true);

    useEffect(() => {
        // 仅在formData改变时执行校验
        const validated = formData.fName !== '' && formData.lName !== '';
        setIsValid(validated);
    }, [formData]); // 依赖数组确保只有formData变化时才触发

    return isValid;
}

export default useValidate

额外优化点（非错误原因，但值得注意） #

你的handleChange中用new Date().getMilliseconds()生成id，存在同一毫秒内多次触发时id重复的风险，建议替换为更可靠的唯一标识生成方式，比如：

const handleChange = (e) =>{
    setFormData({
        ...formData,
        id: crypto.randomUUID(), // 生成唯一UUID
        [e.target.name]: e.target.value
    })
}

如果表单不需要id字段，也可以直接去掉这部分逻辑。

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