Question

每次我运行yarn时，都从下面的代码行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 >

    );

因此，我对此进行了一些研究，显然我的反应或React-dom都不是最新的。 iv尝试同时更新多个时间并运行npm install。不能解决我的问题，我几乎可以肯定我正在正确调用钩子。另一件事是我的全局状态设置正确，因为我可以在react chrome扩展程序中看到它。

Answer 1

那是因为不能在基于class的组件中使用Hook。另外，您可以创建一个HOC组件，以便在基于class的组件中使用它，或将class组件隐匿为功能组件。

为什么在使用钩子时出现此错误“只能在函数组件的主体内部调用钩子”。

1 个答案: