Question

问题如标题中所述。我的父母有一个要在孩子中更新的状态。但是，将setState函数作为道具传递并在子项的useEffect中对其进行更新会导致循环。无论依赖项数组如何，都会发生这种情况。

我认为发生这种情况是因为更新父状态会导致子项的重新渲染，更新依赖的prop并触发另一个重新渲染。不过，不确定这是否正确。

如果有人能解释为什么会发生这种情况以及适当的解决方案，我将很高兴。

此外，以下是导致此行为的逻辑。

export const Parent = () {
    const [state, setState] = useState({something})

    switch(thing) {
       return <Child onNext={someFunction} setSettings={setState}/>
    }
}

const Child = (props) => {
    { onNext, setSettings } = props
    const [childState, setChildState] = useState({something})

    useEffect(
        () => {
            setSettings(childState)
        }, [childState])

    return(<h1>foobar</h1>)
}

Answer 1

我建议您扩大视野，并询问为什么您需要使用子状态的值来更新父状态。每个属性应该只有一个，并且只有“真相之源”，在父母和孩子的状态下复制属性是不好的做法。因此，最好将state从Parent传递到Child，而不是将Child拥有自己的属性。这是一种不恰当的规范方法。

我想在上述情况下要这样做：

export const Parent = () {
    const [state, setState] = useState({something})
    const [stateForChild, setStateForChild] = useState({somethingAnother})

    switch(thing) {
       return <Child onNext={someFunction} setSettings={setState} stateForChild={stateForChild} setStateForChild={setStateForChild}/>
    }
}

const Child = (props) => {
    { onNext, setSettings, stateForChild, setStateForChild } = props

    // use stateForChild and setStateForChild

    return(<h1>foobar</h1>)
}

使用依赖项数组在子useEffect中更新父状态会导致循环

1 个答案: