React Hooks组件未获取最新props值 子组件传值计数无法连续递增问题

你当前的状态提升、子组件透传props.value和onChange的数据流设计本身没有问题，数值跳变是代码写法的bug导致的：

• Grand组件的useEffect使用了空依赖数组[]，只会在组件挂载时执行一次，setInterval的回调会形成闭包，永远捕获挂载时的初始value值0，所以每次调用onChange(value+1)永远传入1，不会持续递增。
• 代码没有添加定时器清理逻辑，组件卸载/更新时会产生内存泄漏，如果出现重复挂载的情况，还会生成多个定时器同时触发，进一步导致数值来回跳动。

方案1：补全useEffect依赖项与清理逻辑 #

修改Grand组件的副作用代码，添加定时器清理函数，同时将value和onChange加入依赖数组，确保每次value更新后，定时器能捕获到最新的值：

const Grand=(props)=>{
  const {onChange,value} = props

  useEffect(()=>{
    const timer = setInterval(()=>{
      console.log(`grad props value:${value}`)
      onChange(value+1)
    },1000)
    // 组件卸载/依赖变化时清除旧定时器
    return () => clearInterval(timer)
  // 补全依赖项
  },[value, onChange])

  return (
    <div>grand:{value}</div>
  )
}

同时可以在App组件中用useCallback包裹onChange回调，避免不必要的定时器重建：

function App() {
  const [value,setValue]=useState(0)
  // 用useCallback缓存回调，引用不变
  const handleChange = useCallback((newVal) => {
    setValue(newVal)
  }, [])
  return (
    <div className="App">
      <Children
          value={value}
          onChange={handleChange}
        />
        app:{value}
    </div>
  );
}

方案2：使用状态更新函数避免闭包依赖 #

如果不想频繁重建定时器，也可以修改状态更新逻辑为函数式写法，不需要依赖当前value值：
修改Grand组件的定时器逻辑：

useEffect(()=>{
  const timer = setInterval(()=>{
    onChange(prev => prev + 1)
  },1000)
  return () => clearInterval(timer)
},[onChange])

对应的App组件的handleChange也要适配函数式入参：

const handleChange = useCallback((updater) => {
  setValue(updater)
}, [])

不需要。

• 当子组件的状态完全受控于父组件，所有变更都需要同步到上层时，保持「状态提升、单向透传props和回调」的模式即可，额外在子组件声明状态反而会导致多份状态不同步的问题。
• 只有当子组件需要维护独立于父组件的临时状态时，才需要单独在子组件内声明[value, setValue]状态。

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