React表单API增查时触发Too many re-renders错误求助

核心触发原因 #

你的代码中单选框的onBlur属性直接执行了状态更新函数，导致组件每次渲染时都会调用setVatPayer(0)/setVatPayer(1)，状态更新触发组件重渲染，进而再次执行状态更新，形成无限循环。

比如这段错误代码：

onBlur={setVatPayer(0)}

这里不是传递事件回调函数，而是直接执行了状态更新操作，每一次组件渲染都会触发状态变更，这就是无限重渲染的元凶。

具体修复步骤 #

1. 修复单选框的onBlur事件绑定 #

将直接调用状态函数改为传递回调函数，确保只有onBlur事件触发时才执行状态更新：

<Form.Check
    defaultChecked
    type="radio"
    defaultValue="neplatce"
    label="Neplátce DPH"
    name="platcedph"
    id="neplatceRadio"
    htmlFor="neplatceRadio"
    onBlur={() => setVatPayer(0)} // 改为回调形式
    checked={data.vat_payer == 0}
/>

<Form.Check
    type="radio"
    defaultValue="platce"
    label="Plátce DPH"
    name="platcedph"
    id="platceRadio"
    htmlFor="platceRadio"
    onBlur={() => setVatPayer(1)} // 改为回调形式
    checked={data.vat_payer == 1}
/>

2. 修正data的初始状态类型 #

你初始定义data为数组[{}]，但后续使用的是data.name、data.vat_payer等对象属性，应将初始状态改为空对象：

const [data, setData] = useState({});

3. （可选）优化表单状态同步逻辑 #

当前表单控件value绑定的是data的初始值，但onChange更新的是单独的状态变量（如name），会导致编辑时控件显示值与用户输入的状态值不同步。可以在获取接口数据后，将data的值同步到各个表单状态：

useEffect(() => {
    fetch(`${Url}subject/get`, {
        method: "GET",
        headers: {
             'Accept': 'application/json',
             'Content-Type': 'application/json',
             'Authorization': `Bearer ${authManager.getToken()}`}
    })
        .then(response => response.json())
        .then(json => {
            setData(json);
            // 同步接口数据到表单状态
            setName(json.name || '');
            setIc(json.ic || '');
            setDic(json.dic || '');
            setAddress(json.address || '');
            setCity(json.city || '');
            setPostalCode(json.postal_code || '');
            setWeb(json.web || '');
            setTelephone(json.telephone || '');
            setVatPayer(json.vat_payer || '');
        })
        .catch(err => console.log(err));
}, []);

之后表单控件的value绑定对应的状态变量即可：

<Form.Control onChange={e => setName(e.target.value)} required type="text" placeholder="name" value={name} />

总结 #

优先修复单选框的onBlur事件绑定，即可立即解决无限重渲染问题。修正data初始类型和优化状态同步，能让表单逻辑更严谨。

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