React中useCallback异常：listDrawPath在回调函数中未更新

常见原因 #

1. 第三方组件缓存旧回调引用
   很多RN绘图类组件会在初始化时缓存传入的回调函数，后续props更新时不会自动替换。即便你的useCallback已生成新函数，组件仍调用旧版本，导致读取到空的listDrawPath。

2. Context更新未生成新数组引用
   若更新listDrawPath时直接修改原数组再赋值（比如listDrawPath.push(item); setListDrawPath(listDrawPath)），数组引用未发生变化，useCallback因依赖项引用不变，不会生成新函数。

解决方法 #

方法一：用useRef保存最新值 #

通过ref实时同步listDrawPath的最新状态，在回调中读取ref的current属性，避免依赖项变化导致的函数重新生成问题：

import { useContext, useCallback, useRef, useEffect } from 'react';
import { DrawContext } from './YourContextFile';

const YourComponent = () => {
  const { listDrawPath } = useContext(DrawContext);
  const latestListRef = useRef(listDrawPath);

  // 同步最新的listDrawPath到ref
  useEffect(() => {
    latestListRef.current = listDrawPath;
  }, [listDrawPath]);

  const onDrawingStart = useCallback(() => {
    // 读取ref中的最新值
    console.log('最新listDrawPath:', latestListRef.current);
  }, []); // 依赖项为空，保持函数引用稳定

  return <DrawingComponent onDrawingStart={onDrawingStart} />;
};

方法二：确保Context更新生成新数组 #

若因数组引用未变导致问题，更新listDrawPath时必须返回新数组：

// 在Context的Provider组件中
const setListDrawPath = (newData) => {
  // 用扩展运算符生成新数组
  setState(prev => [...prev, ...newData]);
  // 完整替换时直接赋值新数组
  // setState(newData);
};

方法三：用ref保存最新回调函数 #

若需保留完整回调逻辑，可将函数存入ref，再传递稳定的包装函数给子组件：

const YourComponent = () => {
  const { listDrawPath } = useContext(DrawContext);
  const onDrawingStartRef = useRef();

  // 包含最新listDrawPath的回调逻辑
  const onDrawingStart = () => {
    console.log('最新listDrawPath:', listDrawPath);
  };

  // 每次渲染更新ref的current值
  useEffect(() => {
    onDrawingStartRef.current = onDrawingStart;
  }, [listDrawPath]);

  // 传递给子组件的稳定包装函数
  const stableOnDrawingStart = useCallback(() => {
    onDrawingStartRef.current?.();
  }, []);

  return <DrawingComponent onDrawingStart={stableOnDrawingStart} />;
};

额外检查点 #

• 确认组件被正确包裹在Context Provider内部，确保能接收Context更新。
• 若子组件用了React.memo，检查比较函数是否忽略了回调变化，可手动指定比较逻辑或用上述ref方法绕过。

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