无法读取未定义的属性“handleReset”

Question

我在我的本机项目中使用 useFormik 钩子

所以我尝试在我的另一个组件中初始化 useFormik，然后将它导入我的注册页面并在此处使用。这是下面的代码。

import React from "react";
import { Formik } from "formik";
import {
  signupValidationSchema,
} from "../../validationSchemas";
import { useFormik } from "formik";

export const SignupFormik = () => {
  const formik=useFormik({
    initialValues: {
      firstName: "",
      lastName: "",
      email: "",
      phone: "",
      state: "",
      city: "",
      type: "",
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
    validationSchema: signupValidationSchema,
  });
  return formik
};

注册.js

import { SignupFormik } from "../../Tools";
import {Form} from 'formik'
export function Signup() {
  const isLoading = useSelector((state) => state.activityIndicator.isLoading);
  return isLoading ? (
    <View style={activityIndicatorStyles.container}>
      <ActivityIndicator size="large" color="#0000ff" />
    </View>
  ) : (
    <View style={signupStyles.screen}>
      <Form>
        <View style={signupStyles.FormWrapper}>
          <TextInput
            name="firstName"
            type="text"
            onChangeText={SignupFormik.handleChange}
            onBlur={SignupFormik.handleBlur}
            value={SignupFormik().values.firstName}
            style={signupStyles.TextInput}
          /> 
          <Button title="Submit" />
        </View>
      </Form>
    </View>
  );
}

因此，一旦我从 formik 导入“FORM”并使用它，我就会收到错误消息

类型错误：无法读取未定义的属性“handleReset”

此错误位于：在表单中（在 Signup.js:20）

警告：Formik 上下文未定义，请确认您正在调用 useFormikContext() 作为组件的子项。

Answer 1

您需要决定是否使用钩子（useFormik<- 那是钩子）或组件（<Form><- 那是组件）。福米克两者都准备好了。组件Form包装了useFormik，并且它需要额外的参数。这就是你有错误的原因。

在你的情况下，最快的解决方案是使用钩子（useFormik），所以你必须删除：

import {Form} from 'formik' // <-- remove it

并替换<Form>为<form>

我注意到在反应世界中使用钩子而不是组件更流行（当然我指的是你的情况）

Answer 2

您已经实现SignupFormik为一个函数，并且该函数没有handleChange您使用的其他方法。
实际上你可能想要实现的是一个自定义钩子：

import React from "react";
import { Formik } from "formik";
import {
  signupValidationSchema,
} from "../../validationSchemas";
import { useFormik } from "formik";

export const useSignupFormik = () => {
  const formik = useFormik({
    initialValues: {
      firstName: "",
      lastName: "",
      email: "",
      phone: "",
      state: "",
      city: "",
      type: "",
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
    validationSchema: signupValidationSchema,
  });

  return formik;
};

进而

import { useSignupFormik } from "../../Tools";
import {Form} from 'formik'
export function Signup() {
  const signupFormik = useSignupFormik()

  const isLoading = useSelector((state) => state.activityIndicator.isLoading);
  return isLoading ? (
    <View style={activityIndicatorStyles.container}>
      <ActivityIndicator size="large" color="#0000ff" />
    </View>
  ) : (
    <View style={signupStyles.screen}>
      <Form>
        <View style={signupStyles.FormWrapper}>
          <TextInput
            name="firstName"
            type="text"
            onChangeText={signupFormik.handleChange}
            onBlur={signupFormik.handleBlur}
            value={signupFormik.values.firstName}
            style={signupStyles.TextInput}
          /> 
          <Button title="Submit" />
        </View>
      </Form>
    </View>
  );
}