reactjs - 无法读取未定义的属性 'handleReset'

Question

我在我的 native 项目中使用 useFormik 钩子(Hook)
所以我尝试在我的另一个组件中初始化 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”并使用它，我就会收到错误消息

TypeError: Cannot read property 'handleReset' of undefined

This error is located at:in Form (at Signup.js:20)

Warning: Formik context is undefined, please verify you are callinguseFormikContext() as child of a component.

Answer 1

您已实现 SignupFormik作为一个函数，而这个函数没有 handleChange或您使用的其他方法。
实际上你可能想要实现的是一个自定义钩子(Hook):

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>
  );
}