如何在React子组件中更新父组件传递的useState状态？为何状态反复重置

• 代码反复将状态重置为0的核心原因是Child组件内的useEffect未传入依赖项数组：React 中如果useEffect不指定第二个参数（依赖数组），会在每一次组件渲染完成后都执行，触发无限更新循环。

具体循环流程：

1. Child 组件首次渲染，useEffect 执行调用setCounter(0)
2. 父组件 counter 状态更新，触发 Child 组件重新渲染
3. Child 重新渲染后再次执行 useEffect，又调用setCounter(0)，即使点击按钮把 counter 改为1，也会被下一次渲染的 Effect 重置为0，循环往复

修复方法 #

如果你的需求是仅在 Child 组件首次挂载时初始化 counter 为0，给 useEffect 添加空的依赖数组[]即可，空依赖代表 Effect 仅在组件首次挂载完成后执行1次。
你在子组件内部函数、useEffect 中调用父组件传递的 useState 更新函数的用法本身符合规范，无需调整其他逻辑。

修正后代码如下：

function Parent () {
    const [counter, setCounter] = React.useState();
    return (
    <Child counter={counter} setCounter={setCounter}/>
  )
}

function Child (props) {
    const counter = props.counter;
  const setCounter = props.setCounter;
  // 添加空依赖数组
  React.useEffect(() => {
    setCounter(0);
  }, [])
  const increment = () => {
      // 如果需要累加计数建议用函数式更新，避免闭包导致的旧值问题
      setCounter(prev => prev + 1);
  }
    return (
  <div> {counter} <button onClick={increment}>Increase Count</button> </div>
  )
}

内容的提问来源于stack exchange，提问作者user13084463