React Context API获取状态setter报错setGlobal is not a function

架构老林

2026-8-29

报错核心原因

触发setGlobal is not a function错误是两个典型问题导致的：

上层未挂载GlobalProvider组件。React Context的取值规则是向上找最近的同名Provider，找不到就返回createContext初始化时传入的默认值。你初始化Context时传的是空对象{}，解构出来的setGlobal是undefined，调用时自然会报"不是函数"的错误。
Hook调用位置违反React规则。你在App.js的import语句之后、组件函数外部直接调用useGlobal()，而React要求所有Hook只能在函数组件/自定义Hook的内部顶层作用域调用，在普通全局作用域调用Hook会直接导致上下文取值失效。

修复方案

先在应用入口文件（通常是main.jsx/index.jsx）用GlobalProvider包裹整个应用根组件，保证所有子组件都能拿到上下文：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
// 注意这里是命名导入，不要写成默认导入
import { GlobalProvider } from './context/GlobalProvider'

ReactDOM.createRoot(document.getElementById('root')).render(
  <GlobalProvider>
    <App />
  </GlobalProvider>
)

修正App.js里的Hook调用位置，把Hook移到组件内部调用，同时更新全局状态时建议合并原有状态，避免覆盖其他已存的全局字段：

import useGlobal from "../hooks/useGlobal.js";

function App() {
  // 正确：在组件内部顶层调用Hook
  const { global, setGlobal } = useGlobal();

  const handleGotoA = () => {
    const id_G = item
    const id_G1 = item1
    const id_G2 = item2
    // 传入函数更新，保留之前的全局状态字段
    setGlobal(prev => ({
      ...prev,
      id_G,
      id_G1,
      id_G2
    }));
  }

  return (
    // 你的页面渲染逻辑
  )
}

export default App