React Context API报错：TypeError: setCurrentUser is not function 问题排查与解决（TS转JS项目）

我帮你分析下，你遇到的这个错误核心原因很明确：你的Router组件没有被GlobalContext的Provider包裹。当你调用useContext(globalContext)时，因为组件不在Provider的范围内，所以只能拿到创建Context时传入的默认空对象{}，自然就找不到setCurrentUser方法了。

快速修复步骤 #

1. 检查根组件的包裹关系
   打开你的应用入口文件（通常是index.jsx或者App.jsx），确保GlobalContext已经包裹了Router或者整个应用。比如正确的写法应该是这样：

   import React from 'react';
   import ReactDOM from 'react-dom';
   import GlobalContext from './store/context/globalContext';
   import Router from './components/Router/Router';
   
   ReactDOM.render(
     <React.StrictMode>
       <GlobalContext>
         <Router />
       </GlobalContext>
     </React.StrictMode>,
     document.getElementById('root')
   );
   

2. 验证Context实例的一致性
   确认所有需要使用globalContext的组件，导入的都是同一个Context实例——也就是你在globalContext.jsx里创建的那个。转JS的时候很容易不小心在其他文件重复创建createContext({})，导致出现多个独立的Context，这也会导致拿到空对象。

3. 额外调试小技巧
   可以在GlobalContext组件里加个日志，确认它是否正常渲染：

   export default function GlobalContext(props) {
     const [currentUser, setCurrentUser] = useState(null);
     console.log('GlobalContext Provider is active'); // 检查控制台是否能看到这条日志
     return (
       <globalContext.Provider value={{ currentUser, setCurrentUser }}>
         {props.children}
       </globalContext.Provider>
     );
   }
   

为什么TS环境下没问题？ #

大概率是TS的类型检查机制帮你规避了这个问题——当你在TS里使用Context时，类型定义会强制你确保组件在Provider范围内，否则会有类型报错。转JS后没有了类型约束，可能不小心移除了Provider的包裹，才出现这个问题。

你的globalContext.jsx写法在JS里是完全正确的，不需要做任何修改，只要确保Provider正确包裹了需要使用Context的组件即可。

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