Question

我需要更新从父项传递来的属性，这会导致无限循环，因为我必须将其包含在useEffect挂钩的依赖项列表中。

示例

function componentFoo({bar, setBar}) {
    const [baz, setBaz] = useState()
    useEffect(()=>{

        setBar({...bar,baz:baz})
    }, [bar, baz])

    useEffect(()=>{
        setBaz(123)  
    }, [])

    return <>{bar}</>
}

如何避免这种情况？

Answer 1

您不得将bar添加为useEffect的依赖项，因为您是在useEffect自身内部对其进行更新，这将导致无限循环。

相反，请像下面那样使用功能性方法来设置setBar

function componentFoo({bar, setBar}) {
    const [baz, setBaz] = useState()
    useEffect(()=>{

        setBar(prevBar => ({...prevBar,baz:baz}))
    }, [baz])

    useEffect(()=>{
        setBaz(123)  
    }, [])

    return <>{bar}</>
}

React钩子如何避免无限更新

1 个答案: