React类组件转函数组件后setState状态不更新问题求解

类组件转函数组件后出现状态更新失效，核心是三个实现差异导致的：

• 闭包陈旧值问题：类组件中this.state始终指向组件实例上的最新状态引用，但函数组件每一次渲染都会生成独立的闭包快照，你当前直接执行setState(func(...args))时，func内部如果依赖状态值，拿到的永远是当前渲染轮次的旧状态，连续触发更新时会出现状态覆盖、更新丢失。
• 引用不稳定问题：当前写法每次组件重渲染都会重新执行_.mapValues生成全新的stateActions对象，传给子组件的props引用每次都变化，会触发子组件非预期重渲染，甚至打断正常的更新链路。
• 额外性能损耗：当前useState初始化时直接传入深拷贝结果，每次组件重渲染都会执行一次_.cloneDeep，完全没有必要。

直接替换为以下实现即可：

export default function BPM() {
  // 传初始化函数，仅首次挂载时执行深拷贝，减少不必要性能消耗
  const [state, setState] = React.useState(() => _.cloneDeep(bpmFlowInitialValues));

  // 缓存stateActions，保证引用稳定
  const stateActions = React.useMemo(() => _.mapValues(
    callbacks,
    (func) => (...args) => {
      // 用函数式更新，始终基于最新的前序状态计算新值，彻底规避闭包旧值问题
      setState(prevState => func(prevState, ...args))
    }
  ), []);

  console.log('state', state);

  return (
    <>
      <ShapesHeader />
      <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
        <Flowchart chart={state} stateActions={stateActions} />
        <Sidebar selected={state?.selected} />
      </Box>
    </>
  );
}

• 所有依赖前序状态计算新状态的逻辑，必须放在setState的updater回调中执行，updater的入参prevState永远是更新前的最新状态，不受闭包快照影响。注意要同步调整你callbacks里的函数实现，第一个参数接收旧状态，其余参数接收透传的调用参数，返回合并后的新状态即可。
• 用useMemo包裹stateActions生成逻辑，由于setState是React官方保证的稳定引用，这里依赖数组传空数组即可，stateActions在组件全生命周期只会生成一次，不会随重渲染变化。
• useState初始化传入函数而非直接传入值，避免非首次渲染时重复执行深拷贝逻辑。

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