Reactjs 如何在包装在HOC中的组件内使用useContext（）钩子？

我有一个登录组件和一个应用程序组件。应用程序组件包含上下文提供程序中的登录组件。登录组件依次由withFormik高阶组件包装以进行表单验证。当我尝试在登录组件中使用useContext（）钩子时，它无法编译，错误如下：

/src/components/login/login.jsx

第12行：在函数“login”中调用React Hook“useContext”，该函数既不是React函数组件，也不是自定义React Hook函数React hooks/rules of hooks

也尝试查看React文档，但无法解决此问题：(

Login.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;

index.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();

/*eslint禁用react/jsx文件扩展名*/
从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter}；
导入“/index.scss”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
//导入存储上下文
从“/store/auth.store”导入AuthContext；
ReactDOM.render(
,
document.getElementById（'root'））
);
serviceWorker.unregister（）；

错误准确地说出了它需要/想要说的内容。钩子只能在React功能组件内部调用

当您将

login

组件作为功能组件编写时，请使用

withForm

HOC将其包装为类组件。您应该阅读

withFormik

源代码以查看它：

基本上，

with formik

HOC所做的（以及许多其他HOC所做的相同事情）是将组件包装在类组件中。这样做可以将附加的道具（通常称为

注入道具

）传递给组件

---

为了解决您的问题，您应该避免将react钩子与

withFormik

HOC一起使用。您可以选择使用

Formik

组件，而不是

withFormik

HOC。

错误正好说明了它需要/想要说的内容。钩子只能在react功能组件内部调用

当您将

login

组件作为功能组件编写时，请使用

withForm

HOC将其包装为类组件。您应该阅读

withFormik

源代码以查看它：

基本上，

with formik

HOC所做的（以及许多其他HOC所做的相同事情）是将组件包装在类组件中。这样做可以将附加的道具（通常称为

注入道具

）传递给组件

---

为了解决您的问题，您应该避免将react hook与

withFormik

HOC一起使用。您可以选择使用

Formik

组件，而不是

withFormik

HOC。

我尝试完全取消withFormik HOC的使用。只是制作了一个只返回一个空格的功能组件。它仍然抛出相同的错误。修复了它。问题不在于withFormik HOC，而在于React hooks更新，该更新强制对组件名称使用大写符号，甚至对功能组件也是如此。在将组件名称“login”替换为“login”后，withFormik HOC也可以正常工作。我尝试完全取消withFormik HOC的使用。Just制作了一个只返回一个空格的功能组件。它仍然抛出相同的错误。修复了该错误。问题不在于withFormik HOC，而在于React hooks更新，该更新强制对组件名称使用大写符号，甚至对功能组件也是如此。在将组件名称“login”替换为“login”后，它开始工作很好，还有withFormik HOC。

import { createContext } from 'react';

const initialContext = {
  user: null,
  isAuthenticated: false,
};

const authContext = createContext({ ...initialContext });

export default authContext;

/* 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();