Javascript 为什么在使用钩子时会出现此错误；钩子只能在函数组件的主体内部调用；？

每次运行纱线时，从以下代码行开始

const context=useContext（GlobalContext）我遇到了这样一个“错误：钩子调用无效。钩子只能在函数组件的主体内部调用。”我如何解决这个问题？这让我发疯了。这是一个显示错误、依赖项和我的代码的屏幕截图

这是我的globalState的代码，如果这是导致它的原因

import React, { createContext, useReducer } from "react";
import AppReducer from './AppReducer';

// initial state
const initialState = {
    healthData:
        { age: "38", gender: "male", goal: "Lose", height: "180.34", weight: 80 }

}

export const GlobalContext = createContext(initialState);

// provider component
export const GlobalProvider = ({ children }) => {
    const [state, dispatch] = useReducer(AppReducer, initialState);


    return (<GlobalContext.Provider value={{
        healthData: state.healthData
    }}>
        {children}
    </GlobalContext.Provider>);
}

export default (state, action) => {
    switch(action.type) {
        default:
            return state;
    }
}

  return (
      <div>
        <Router>
          <div className='App'>
            {this.state.user ? (<Nav drawerClickHandler={this.drawerToggleClickHandler} />) : (<Login_bar />)}
            <SideDrawer sidedrawerClickHandler={this.sidedrawerToggleClickHandler} show={this.state.sideDrawerOpen} />
            {backdrop}
            <GlobalProvider>
              {this.state.user ?
                (< Switch >
                  <Route path='/settings_page' component={settings_page} exact />,
                  <Route path='/setup_page' component={setup_page} exact />,
                  <Route path='/' component={Main_page} />
                </Switch>) : (<Login_page />)}
            </GlobalProvider>
          </div>
        </Router>
      </div >

    );

import React，{createContext，useReducer}来自“React”；
从“./AppReducer”导入AppReducer；
//初始状态
常量初始状态={
健康数据：
{年龄：“38”，性别：“男性”，目标：“减肥”，身高：“180.34”，体重：80}
}
导出常量GlobalContext=createContext（initialState）；
//提供者组件
导出常量GlobalProvider=（{children}）=>{
const[state，dispatch]=useReducer（appeducer，initialState）；
返回(
{儿童}
);
}
导出默认值（状态、操作）=>{
开关（动作类型）{
违约：
返回状态；
}
}
返回(
{this.state.user？（）：（）}
{background}
{this.state.user？
（
,
,
) : ()}
);

所以我对此做了一些研究，显然我的react或react dom可能不是最新的。Iv尝试了多次更新和运行npm安装。没有解决我的问题，我几乎可以肯定我调用的钩子是正确的。另一件事是我的全局状态设置正确，因为我可以在react chrome扩展中看到它。
这是因为挂钩不能在基于
类的组件中使用。或者，您可以创建一个
HOC
组件，并在基于
类的组件中使用它，或者将
类的组件转换为功能组件。
为什么示例在函数外有一个单独的返回？我还非常确定useContext不能在componentDidMount中使用（我确定它需要在构造函数中）。它必须遵循钩子的规则。很抱歉，让我编辑一下，它们是来自不同的.js文件的代码片段，这些文件都构成了globalState。这实际上不是我的任何.js文件的代码。我想如果我把所有的代码都包括进去，帖子会很长。你看到我的评论编辑了吗？我认为钩子的规则被打破了，这就是为什么它不起作用的原因。在我刚刚尝试更新react dom之前，我确实在构造函数中尝试过它。我也尝试过render（）不起作用我很确定我应该能够在任何函数中调用钩子，不是吗？在查找ti时，我所能看到的是react dom需要更新，我已经做了多次，我认为最简单的事情是将我的组件转换为功能组件thanks@lukeet我个人觉得它们更简单。你知道的任何好的文档，要演示如何转换为功能组件，或者google是我的朋友吗？如果此上下文必须用于许多基于类的组件（已编写），则您可以创建一个HOC，否则，最好将组件转换为功能组件。涵盖类组件到功能组件：