React将props存入state时触发Too many re-renders无限循环如何解决

React 函数组件的函数体本身就是渲染逻辑，每次组件渲染都会从头到尾完整执行一遍。你在子组件的顶层渲染逻辑中直接调用了setInnerInstitute，只要Object.keys(instituteObject).length > 0的条件成立，就会触发子组件重渲染；重渲染后又会再次执行顶层逻辑，再次满足条件、触发setInnerInstitute，最终陷入无限重渲染的死循环。

结合你的场景，父组件请求接口完成后，传入子组件的instituteObject会一直满足长度判断条件，所以这个循环会持续触发，React 就会抛出 Too many re-renders 错误。

• 方案1（最通用，适用于子组件需要修改该数据的场景）：将状态同步逻辑放到useEffect中，仅当instituteObject发生变化时才执行赋值操作

const InstituteForm = (props) => {
    const {instituteObject = {}} = props 
    const [innerInstitute, setInnerInstitute] = useState({})
    
    useEffect(() => {
        if (Object.keys(instituteObject).length > 0) {
            setInnerInstitute(instituteObject)
        }
    }, [instituteObject]) // 仅在instituteObject变化时执行回调

    return (
        <React.Fragment>
            not yet.
        </React.Fragment>
    )
} 

useEffect的回调只会在依赖项变化后、组件渲染完成后执行，不会在每次渲染时都触发，从逻辑上切断了循环触发重渲染的路径。

• 方案2（优化方案，适用于子组件仅读取该数据的场景）：如果子组件不需要修改innerInstitute的内容，仅做展示或只读处理，可以直接删除innerInstitute这个本地状态，直接使用props传入的instituteObject即可，不需要做多余的状态同步，从根源上避免该问题。

内容的提问来源于stack exchange，提问作者Itzik.B