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”并使用它，就会出现错误

<块引用>

TypeError: 无法读取未定义的属性 'handleReset'

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

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

Answer 1

您已将 nullptr 实现为函数，并且此函数没有 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;
};

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

1 个答案: