useFormikContext Error: Invalid hook call. Hooks can only be called inside of the body of a function component

Question

我想将 formik 作为道具传递给子组件 CustomFormGroup 并且我的父组件是 Profile 我正在尝试关注回答。在 Profile 组件中，我收到错误。 错误：挂钩调用无效。钩子只能在函数组件的内部调用。

组件

import Input from "antd/lib/input/Input";
import { customFormGroupProps } from "../types";
import { useFormikContext } from "formik";

const CustomFormGroup = (props: customFormGroupProps) => {
  const context = useFormikContext<customFormGroupProps>();
  console.log(context);
  return (
    <div>
      <label className='mt-1'>{props.labelName}</label>
      <Input
        placeholder={props.placeholder} 
      />
    </div>
  );
};

export default CustomFormGroup;

类型如下

export interface customFormGroupProps {
  labelName: string;
  placeholder: string;
}

父组件

import CustomFormGroup from "../utils/CustomFormGroup";
import formik from "./profileConfig";
import Form from "antd/lib/form/Form";

const Profile = () => {
  return (
          <Form onFinish={formik.handleSubmit}>
            <CustomFormGroup labelName="Name" placeholder="Jhon Doe" />
          </Form>
  );
};

export default Profile;

配置文件配置文件

import { useFormik } from "formik";
const formik = useFormik({
  initialValues:{
    name:""
  },
  onSubmit: values => {
    console.log(values.name);
  }
});
export default formik;

Answer 1

您不能在 profileConfig 文件中调用 useFormik()，因为它不在 React 组件内。 useFormik() 是来自 Formik 的自定义 React 钩子，钩子在 React 组件之外不起作用。

要修复，请将其移至 Profile 组件。

const Profile = () => {
  const formik = useFormik({
    initialValues:{
      name:""
    },
    onSubmit: values => {
      console.log(values.name);
    }
  });
  return (
    <Form onFinish={formik.handleSubmit}>
      <CustomFormGroup labelName="Name" placeholder="Jhon Doe" />
    </Form>
  );
};

Answer 2

您不能在组件函数之外使用挂钩，这只是它们的工作方式。但是，你可以做一个钩子的组合。

const formik = useFormik({
  initialValues:{
    name:""
  },
  onSubmit: values => {
    console.log(values.name);
  }
});

就这样吧

import CustomFormGroup from "../utils/CustomFormGroup";
import Form from "antd/lib/form/Form";
import { useFormik } from "formik";

const Profile = () => {
  const formik = useFormik({
     initialValues:{
     name:""
    },
    onSubmit: values => {
    console.log(values.name);
   }
  });
  return (
          <Form onFinish={formik.handleSubmit}>
            <CustomFormGroup labelName="Name" placeholder="Jhon Doe" />
          </Form>
  );
};

export default Profile

useFormikContext Error: Invalid hook call. Hooks can only be called inside of the body of a function component

useFormikContext Error: Invalid hook call. Hooks can only be called inside of the body of a function component

reactjs

react-hooks

formik

react-context