【useEffect】props更改子组件报错：react-dom.development.js:16317 Uncaught Error

项目场景：

react-vite-antd

问题描述

`通过父组件传值disabled控制子组件是否禁用，但是报错了

react-dom.development.js:16317 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

const FormDisabledDemo = forwardRef((props, ref) => {
const [componentDisabled, setComponentDisabled] = useState<boolean>(false);
if (props.formObject.disabled) {
        setComponentDisabled(props.formObject.disabled)
    }
`return (
        <>
            <Form
                form={form}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                layout="horizontal"
                // onFinish={onFinish}
                onValuesChange={handleFormValuesChange}
                disabled={componentDisabled}
                style={{ maxWidth: 600 }}
            >
                <Form.Item label="菜单名称" name="label">
                    <Input />
                </Form.Item>
                <Form.Item label="地址" name="to">
                    <Input />
                </Form.Item>
                <Form.Item label="图标" name="icon">
                    <Input />
                </Form.Item>
            </Form>
        </>
    );``
});

export default FormDisabledDemo;
---

原因分析：

提示：这里填写问题的分析：
在React中，useEffect 是用于处理副作用操作的钩子函数。通常，useEffect 在组件渲染后执行，它可以用于订阅数据、处理异步操作、监听数据的变化，以及在组件卸载时清除订阅或清理资源。

当您希望在外部数据改变时更新组件的状态，通常会将这个外部数据作为 props 传递给组件。将状态更新操作放在 useEffect 中的原因是为了确保在数据更新时触发重新渲染，并且防止出现不必要的渲染。

具体来说，将 props 传递的更改放在 useEffect 中有以下好处：

1. 避免不必要的渲染：将 props 传递的更改放在 useEffect 中可以确保仅在真正需要时触发重新渲染。如果您在组件的渲染过程中直接修改 props，这可能会导致不必要的渲染，性能问题和潜在的无限循环。

2. 安全操作：useEffect 中的操作是在渲染完成之后执行的，这意味着您可以在此处执行安全的操作，如数据订阅、网络请求等。

3. 遵循React生命周期：useEffect 模拟了生命周期方法，允许您更好地管理副作用操作，包括在组件卸载时进行清理工作。

举例来说，如果您希望在外部数据（通过 props 传递）发生变化时，更新组件内部的状态，可以这样做：

useEffect(() => {
    // 这里处理外部数据的变化，例如设置组件内部状态
    setStateBasedOnProps(props.someData);
}, [props.someData]);

通过将 props 的更改放在依赖项数组中，只有在 props.someData 发生变化时，useEffect 才会触发。这是React中一种常见的做法，以确保正确地管理组件状态和渲染。

---

解决方案：

提示：放useEffect里面

 useEffect(() => {
        if (props.formObject.defineData) {
            form.setFieldsValue(props.formObject.defineData);
            // setFormData(props.formObject.defineData)
        }
        if (props.formObject.disabled) {
            setComponentDisabled(props.formObject.disabled)
        }
        // console.log('表单数据变化:', formData);
    }, [props.formObject]);