React中暴露useState setter到全局后useEffect未触发，如何解决？

直接将useState返回的setPanelActive挂载到globalThis后，外部调用无法触发监听状态的useEffect，核心问题在于未处理组件生命周期变化（比如组件卸载后全局引用失效），或者全局引用未绑定到当前有效的setter实例。以下两种方案都能解决问题，按需选择：

方案一：包装器函数 + useRef（快速解决全局调用问题） #

通过useRef实时保存最新的setter引用，再挂载一个包装函数到全局，确保外部调用时始终使用当前组件有效的setter：

import { useState, useEffect, useRef } from 'react';

function YourComponent() {
  const [panelActive, setPanelActive] = useState(false);
  const setPanelActiveRef = useRef(setPanelActive);

  // 实时更新ref中的setter（useState的setter本身稳定，这步可省略，仅作保险）
  useEffect(() => {
    setPanelActiveRef.current = setPanelActive;
  }, [setPanelActive]);

  // 挂载包装函数到全局，并在组件卸载时清理
  useEffect(() => {
    (globalThis as any).setPanelActive = (value: boolean) => {
      setPanelActiveRef.current(value);
    };

    return () => {
      delete (globalThis as any).setPanelActive;
    };
  }, []);

  useEffect(() => console.log(panelActive), [panelActive]);

  return <div>Your Component Content</div>;
}

外部调用globalThis.setPanelActive(true)时，会通过ref触发当前组件的状态更新，对应的useEffect也会正常执行。

方案二：Context Provider（符合React最佳实践） #

如果需要在多组件间共享状态，或想避免全局变量污染，用Context封装状态和setter是更规范的做法：

1. 创建PanelContext和Provider #

import { createContext, useContext, useState, ReactNode, useRef, useEffect } from 'react';

const PanelContext = createContext<{
  panelActive: boolean;
  setPanelActive: (value: boolean) => void;
} | null>(null);

export const PanelProvider = ({ children }: { children: ReactNode }) => {
  const [panelActive, setPanelActive] = useState(false);
  const setPanelActiveRef = useRef(setPanelActive);

  useEffect(() => {
    setPanelActiveRef.current = setPanelActive;
  }, [setPanelActive]);

  // 若需要外部非React环境调用，挂载包装函数到全局
  useEffect(() => {
    (globalThis as any).setPanelActive = (value: boolean) => {
      setPanelActiveRef.current(value);
    };

    return () => {
      delete (globalThis as any).setPanelActive;
    };
  }, []);

  return (
    <PanelContext.Provider value={{ panelActive, setPanelActive }}>
      {children}
    </PanelContext.Provider>
  );
};

// 自定义Hook，供内部组件使用
export const usePanel = () => {
  const context = useContext(PanelContext);
  if (!context) {
    throw new Error('usePanel必须在PanelProvider内部使用');
  }
  return context;
};

2. 在根组件中包裹Provider #

import { PanelProvider } from './PanelContext';

function App() {
  return (
    <PanelProvider>
      {/* 你的应用组件 */}
    </PanelProvider>
  );
}

3. 内部组件使用状态 #

import { usePanel } from './PanelContext';

function SomeComponent() {
  const { panelActive, setPanelActive } = usePanel();
  
  useEffect(() => console.log(panelActive), [panelActive]);

  return <button onClick={() => setPanelActive(true)}>激活面板</button>;
}

这种方案既支持内部组件通过React规范的方式使用状态，也能满足外部环境的全局调用需求，同时避免了全局变量的滥用。

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