如何在包装在 HOC 中的组件中使用 useContext() 钩子

Question

我有一个登录组件和一个应用程序组件。应用程序组件包含上下文提供程序中的登录组件。登录管理器组件又由 withFormik 高阶组件包装，用于表单验证。当我尝试在登录管理器组件中使用 useContext(( 钩子时，它无法编译并显示错误：

./src/components/login/Login.jsx

第 12 行：React Hook "useContext" 在函数 "login" 中调用，它既不是 React 函数组件也不是自定义的 React Hook 函数 react-hooks/rules-of-hook

也尝试浏览 React 文档，但无法解决此问题。 :(

登录.jsx：

import React, { useContext } from 'react';
import { withFormik, Form, Field } from 'formik';
import { RenderInput, RenderMobileNumberInput } from '../../utils/input.util';
import { isMobile, isPassword } from '../../utils/validation.util';
import AuthContext from '../../store/auth.store';
import '../../styles/login.scss';
const login = props => {
  const authContext = useContext(AuthContext);
  console.log('authContext', authContext);
  return (
    <div className="login-container">
      <div className="login-content">
        <h1 className="header">Agent Login</h1>
        <div className="login-form">
          <Form>
            <div className="input-row">
              <label htmlFor="mobile">Mobile Number</label>
              <Field
                component={RenderMobileNumberInput}
                countrycode="+91"
                name="mobile"
                placeholder="Mobile Number"
                validate={isMobile}
              />
            </div>
            <div className="input-row">
              <label htmlFor="password">Password</label>
              <Field
                type="password"
                component={RenderInput}
                name="password"
                placeholder="Enter Password"
                validate={isPassword}
              />
            </div>
            <button className="btn btn-yellow" type="submit">
              Login
            </button>
          </Form>
        </div>
      </div>
    </div>
  );
};
const FormikApp = withFormik({
  mapPropsToValues(props) {
    return {
      mobile: props.mobile || '',
      password: props.password || '',
    };
  },
  handleSubmit(values) {
    console.log(values);
  },
})(login);
export default FormikApp;

应用.jsx：

// Importing required NPM modules
import React from 'react';
import { withRouter, Switch, Route } from 'react-router-dom';
// Importing local modules & components
import Login from './components/login/Login';
import AuthContext from './store/auth.store';
// Impoting stylesheets
import './App.scss';
function App() {
  return (
    <AuthContext.Provider value={‌{ isAuthenticated: false }}>
      <div className="App">
        <Switch>
          <Route path="/" exact component={Login} />
        </Switch>
      </div>
    </AuthContext.Provider>
  );
}
export default withRouter(App);

auth.store.js：

import { createContext } from 'react';
const initialContext = {
  user: null,
  isAuthenticated: false,
};
const authContext = createContext({ ...initialContext });
export default authContext;

索引.js：

/* eslint-disable react/jsx-filename-extension */
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';
// Importing store contexts
import AuthContext from './store/auth.store';
ReactDOM.render(
  <BrowserRouter>
    <AuthContext.Provider value={{}}>
      <App />
    </AuthContext.Provider>
  </BrowserRouter>,
  document.getElementById('root')
);
serviceWorker.unregister();

Answer 1

该错误准确地说明了它需要/想要说的内容。Hook 只能在 React 功能组件中调用。https://reactjs.org/docs/hooks-rules.html

将login组件编写为功能组件时，使用 HOC 将其转换为类组件withForm将其包装。您应该阅读withFormik源代码以查看它：https://github.com/jaredpalmer/formik/blob/next/src/withFormik.tsx。

基本上，withFormik HOC 所做的(以及许多其他 HOC 所做的同样的事情(是将您的组件包装在类组件中。这样做是为了将额外的道具(通常称为injected props(传递给您的组件。

为了解决您的问题，您应该避免将反应钩子与 withFormik HOC 一起使用。您可以选择使用Formik组件而不是withFormik HOC。