useCallback返回闭包内调用setState无法更新状态如何解决？

问题原因 #

这一问题本质是两个常见的React使用错误共同导致的：

• 违反状态不可变原则：你在setState的回调函数中直接修改了原状态对象的属性，之后返回了和之前完全相同引用的状态值。React在做状态更新的浅比较时，会认为状态没有发生变化，因此不会触发组件重渲染，页面自然看不到更新效果。
• 你的闭包写法本身逻辑没有问题，但你传递回调的方式如果配合React.memo等性能优化方案使用时，会因为每次渲染都生成新的函数引用，导致子组件不必要的重渲染（这不是本次状态不更新的核心原因，但属于可以优化的点）。

解决方法 #

1. 修正状态更新逻辑，遵守不可变原则 #

所有状态修改都要返回全新的引用值，不要直接修改原状态：

原复现代码修改示例

const changer = useCallback(() => {
  return () => {
    setState(prev => {
      // 拷贝原数组生成新数组
      const newState = [...prev];
      // 拷贝要修改的对象，生成新对象再修改属性
      newState[1] = {
        ...newState[1],
        cars: ['Ferrari']
      };
      return newState;
    });
  }
}, [setState]);

父组件核心代码修改示例

const updateValue = useCallback(() => {
  return (value) => {
    setState(prev => {
      // 用map返回新数组，匹配到对应索引时替换为新值
      return prev.map((item, index) => index === currentIndex ? value : item);
    })
  }
}, [currentIndex, setState]);

2. 可选优化：避免重复生成回调函数 #

如果子组件使用了React.memo做性能优化，你可以提前生成闭包函数并缓存，避免每次渲染都生成新的函数引用：

// 用useMemo直接缓存最终要传给子组件的回调，不需要再嵌套一层函数
const updateFunction = useMemo(() => {
  return (value) => {
    setState(prev => prev.map((item, index) => index === currentIndex ? value : item));
  }
}, [currentIndex, setState]);

// 传递时不需要加括号调用
<Child updateFunction={updateFunction} />

修改后状态即可正常触发更新。

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