React项目调用GlobalContext中postCompany时报函数不存在错误

报错本质 #

抛出TypeError: postCompany is not a function的核心原因很简单：CreateCompany组件里通过useContext解构拿到的postCompany变量值是undefined，对非函数类型的值执行调用操作就会触发这个错误。结合你给出的代码，这类问题的常见触发点按出现概率排序：

• 公司模块的GlobalProvider没有正确包裹CreateCompany组件
  你创建上下文时传入的默认值是initialState，仅包含companies、error、loading三个字段，没有任何CRUD方法。如果CreateCompany组件在上层组件树中，没有被来自CompanyGlobalState的GlobalProvider包裹，useContext拿到的就永远是这个初始默认值，自然解构不出postCompany。
  这也能解释为什么相同逻辑的用户新增功能可以正常运行：用户模块的上下文消费组件都被对应的用户GlobalProvider正确挂载了，只是公司模块的组件漏了套Provider壳子。
• GlobalProvider渲染崩溃，无法向下传递正确的上下文值
  看你给出的Provider返回片段：

  <GlobalContext.Provider value={{
      companies: state.companies,
      error: state.error,
      loading: state.loading,
      getCompanies,
      deleteCompany,
      postCompany
  }}>
  

  这个value对象里引用了getCompanies、deleteCompany两个变量，但你当前代码里只实现了postCompany，另外两个函数完全没有定义。JS在构建这个value对象时，会因为读取未定义变量直接抛出ReferenceError，导致整个Provider组件渲染中断，下游所有组件拿到的上下文仍然是初始的默认值，自然找不到postCompany。

排查与修复步骤 #

1. 检查组件树的Provider挂载关系
   确认在路由配置、页面根组件的结构中，所有消费公司上下文的组件（包括CreateCompany）都被来自../../context/Company/CompanyGlobalState的GlobalProvider包裹，注意不要和其他模块（比如用户模块）导出的同名Context、同名Provider导错路径。
2. 补全Provider内的代码引用
   要么按照业务逻辑把缺失的getCompanies、deleteCompany两个CRUD方法补全，要么暂时把这两个未实现的字段从value对象里删掉，避免构建value时引用未定义变量导致Provider渲染崩溃。修正后确保value对象里完整挂载已经实现的postCompany方法。
3. 加临时打印验证上下文传递
   在CreateCompany组件里先不对context做解构，打印完整的上下文值做校验：

   const companyContext = useContext(GlobalContext)
   console.log(companyContext)
   

   如果打印结果里postCompany是类型为function的属性，就说明上下文传递链路正常，再执行表单提交的调用逻辑即可。

注意：你写的postCompany函数内部的axios请求、dispatch逻辑本身没有问题，报错发生在函数调用前的上下文取值阶段，不需要改动函数内部的业务代码。

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