使用依赖数组更新子 useEffect 中的父 state 会导致循环

Question

问题如标题所述。 我的父母中有一个 state，我想在孩子身上更新。 但是，将 setState function 作为道具传递并在孩子的 useEffect 中更新它会导致循环。 无论依赖数组如何，都会发生这种情况。

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

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

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

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 的值更新父母的 state。 对于每个属性，您应该有一个并且只有一个“事实来源”，在父母和孩子的状态下复制财产是不好的做法。 因此，最好将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>)
}