React中如何在ResizeObserver回调中正确获取Context数据？

你的问题是闭包捕获旧值导致的：dataMethod作为顶层函数，每次组件渲染都会重新创建，但你在useEffect里初始化的ResizeObserver绑定的是组件首次（或上一次mainContext.data更新时）的dataMethod，它捕获的是当时的mainContext引用，后续mainContext.data更新后，回调里还是旧的上下文数据。

下面是两种可行的解决方式：

方式一：在useEffect内部定义回调函数 #

把dataMethod放到useEffect内部，这样每次mainContext.data更新时，effect会重新执行，创建的新回调能捕获到最新的上下文数据：

function getView() {
  const mainContext = useContext(MainContext);

  useEffect(() => {
    const activeDiv = document.getElementById('active-div');
    if (!activeDiv) return;

    // 内部定义回调，直接访问当前effect的mainContext.data
    function dataMethod() {
      let data = mainContext?.data; // 现在能拿到最新有效值
      // 你的业务逻辑
    }

    const observer = new ResizeObserver(dataMethod);
    observer.observe(activeDiv);

    // 组件卸载或依赖更新时清理观察者
    return () => {
      observer.unobserve(activeDiv);
      observer.disconnect();
    };
  }, [mainContext?.data])

  ...
}

方式二：用useRef保存最新数据引用 #

通过useRef维护一个始终指向最新mainContext.data的引用，回调里直接读取这个引用的值：

function getView() {
  const mainContext = useContext(MainContext);
  // 用ref保存最新数据
  const dataRef = useRef(mainContext?.data);

  // 每次data更新时同步ref的值
  useEffect(() => {
    dataRef.current = mainContext?.data;
  }, [mainContext?.data])

  useEffect(() => {
    const activeDiv = document.getElementById('active-div');
    if (!activeDiv) return;

    function dataMethod() {
      let data = dataRef.current; // 直接取最新数据
      // 你的业务逻辑
    }

    const observer = new ResizeObserver(dataMethod);
    observer.observe(activeDiv);

    return () => {
      observer.unobserve(activeDiv);
      observer.disconnect();
    };
  }, [])

  ...
}

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