反应钩子如何避免无限更新

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 本身中更新它，它会导致无限循环。

而是使用函数式方法来设置栏，如下所示

function componentFoo({bar, setBar}) {
const [baz, setBaz] = useState()
useEffect(()=>{
setBar(prevBar => ({...prevBar,baz:baz}))
}, [baz])
useEffect(()=>{
setBaz(123)  
}, [])
return <>{bar}</>
}