Formik submitForm() TypeError

Question

重要:安装旧版本的Formik可以消除此错误。我用npm install formik@2.0.7 --save 来解决这个问题。从2.0.8开始，bug回来了.

我第一次尝试使用Formik，并且遵循一个指南，但是将它应用到我的表单中，在表单中，我的div和输入有不同的类，布局也不同，但我不认为这是问题所在。

我在谷歌上找不到有这个错误的人。我将从文件中添加整个代码，因为其中一些问题可能是由于导入造成的。

这是来自浏览器控制台的错误：

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

在代码如下所示时按submit按钮时会发生错误

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)}</pre>
                    {console.log(errors)}
                </div>
                <button type="submit" className="btn btn-primary" disabled={false}>Submit</button>
                </form> 
            )}
        </Formik>
    );
};

但是如果我把<form onSubmit={handleSubmit}>改为

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

然后没有错误，但它显然是无用的，因为在这种情况下，它不再是Formik表单了，验证没有被完成，等等……

Answer 1

实际上你的代码运行得很好。我在沙盒上用最新的Formik版本v2.1.4对它进行了测试(复制/粘贴)，它似乎有效。

不确定，但这可能是您开发环境中其他库的一些问题吗？或者可能是node_modules缓存。

我做了一些简单的修改以确保并添加了一些缺少的类。在这个沙盒上看看