Formik submitForm () TypeError - PullRequest
Новая
       1

Formik submitForm () TypeError

0 голосов
/ 27 марта 2020

ВАЖНО: Установка более старой версии Formik избавляет от этой ошибки. Я использовал npm install formik@2.0.7 --save, чтобы решить это. Начиная с версии 2.0.8 ошибка возвращается.

Я пытался использовать Formik впервые и следовал руководству, но применял его к моей форме, где у моих элементов div и входов были разные классы и макет был другим, но я не думаю, что это проблема.

Я не могу найти в Google никого, кто имеет эту ошибку. Я добавлю весь код из файла, потому что некоторые проблемы, возможно, связаны с импортом.

Это ошибка из консоли браузера: 

Warning: An unhandled error was caught from submitForm() TypeError: Function has non-object prototype 'undefined' in instanceof check
    at Function.[Symbol.hasInstance] (<anonymous>)
    at Formik.tsx:757

Ошибка возникает при нажатии кнопки отправки. кнопка, когда код имеет вид, показанный ниже 

<code>import React,{useState} from 'react'
import * as Yup from 'yup'
import {Formik} from 'formik'
import Error from './Error'

const ValidationSchema = Yup.object().shape({
    nicknameField: Yup.string().min(1,"Minimal length: 1").max(16, "Maximum length: 16")
    .required("Minimum length: 1")
    .matches("^[a-zA-Z0-9\\[\\]!@_-]{1,16}$", "Only A-Z, a-z, 0-9, []!@_- characters are allowed")
});

export default function ChooseNickname(){
    return(
        <Formik initialValues={{nicknameField:""}}
        validationSchema={ValidationSchema}
        onSubmit={(values, { setSubmitting, resetForm }) => {
            // setSubmitting(true);

            setTimeout(() => {
              alert(JSON.stringify(values, null, 2));
              resetForm();
              setSubmitting(false);
            }, 500);
          }
        }>
            {({values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting}) => (
                <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <h2 className="font-weight-bold text-dark">Set your nickname</h2>
                    <input type="text" 
                    className={touched.nicknameField && errors.nicknameField? "form-control is-invalid":"form-control"}
                    name="nicknameField" 
                    id="nicknameField"
                    placeholder="nickname"
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.nicknameField}
                    />
                    <pre>{JSON.stringify(values, null, 2)}
{console.log (ошибки)} Submit )} ); };

Но если я изменю <form onSubmit={handleSubmit}> на 

<form onSubmit={() => {
    alert("formik submitting")
}}>

, то ошибки нет, но она явно бесполезна, потому что в этом случае это уже не форма Formik, проверка не делается, et c ...

1 Ответ

0 голосов
/ 27 марта 2020

На самом деле ваш код работает нормально! .. Я протестировал (скопировал / вставил) его на codeSandbox с последней версией Formik v2.4.1 , и, похоже, он работает.

Не уверен, но это может быть проблема с другими библиотеками в вашей среде разработки? или, может быть, node_modules кеш.

Я сделал несколько простых изменений, чтобы убедиться, и добавил несколько пропущенных классов. Проверьте это в этой песочнице

...