Question

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

2021-02-16

15836

reactjs react-native react-hooks formik

我在我的 React 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
};

signup.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 calling useFormikContext() as child of a component.

Answer 1

您需要决定是否使用钩子（ useFormik <- 这是钩子）或组件（ <Form> <- 这是组件）。Formik 准备了两者。组件 Form 包装了 useFormik ，并且它需要其他参数。这就是您出现错误的原因。

对于您而言，最快的解决方案是使用钩子（ useFormik ），因此您必须删除：

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

并将 <Form> 替换为 <form>

我注意到在 React 世界中，使用钩子而不是组件更受欢迎（当然我指的是您的情况）

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