web-dev-qa-db-fra.com

Ne peut pas lire la propriété 'Handlereset' de non définie

J'utilise Useformik Hook dans mon projet natif de réact

Donc, j'essaie d'initialiser Useformik dans mon autre composant, puis de l'importer dans ma page d'inscription et d'utiliser ici.Le code ci-dessous.

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

Donc comme des selles que j'importe "formulaire" de Formik et l'utiliser, je reçois une erreur

TypeError: Impossible de lire la propriété 'Handlereset' de non définie

Cette erreur est située à: sous forme (à Signup.js: 20)

AVERTISSEMENT: Le contexte de Formik est indéfini, veuillez vérifier que vous appelez UseformikContext () comme enfant d'un composant.

reactjsreact-nativereact-hooksformik
7
Ratnabh kumar rai

Vous avez implémenté SignupFormik comme fonction, et cette fonction n'a pas handleChange ou d'autres méthodes que vous utilisez.
[.____] En fait, ce que vous voulez probablement implémenter est un crochet personnalisé:

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

Puis

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