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

Question

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

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

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

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

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>)
}