React中Formik <Form/>调用resetForm()提示未定义，如何保留现有写法重置表单

问题原因 #

你遇到的报错是因为resetForm是Formik提供给onSubmit回调的第二个参数（表单辅助方法集合）里的内置方法，你当前的代码只解构了setSubmitting，自然会提示resetForm未定义。

解决方法 #

不需要修改你现在使用<Formik>组件嵌套的书写方式，只需要两步调整即可：

1. 在onSubmit的第二个参数里补充解构出resetForm方法
2. 建议将resetForm()调用移到setTimeout内部，确保评论存储逻辑执行完成后再重置表单，避免逻辑时序问题

修改后的完整代码如下：

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import {createComment} from '../../services/CommentLocalStorage.js'
import * as Yup from 'yup';
 
function CommentForm(props){
   return (
        <Formik
        initialValues={{ autor: '', content: ''}}
        validationSchema={Yup.object({
            autor: Yup.string().required('Required'),
            content: Yup.string().required('Required')
        })}
        onSubmit={(values, { setSubmitting, resetForm }) => {
            setTimeout(() => {
                createComment(props.pageEnum, props.articleId, values.autor, values.content)
                setSubmitting(false);
                resetForm();
            },400);
        }}
        >
            <Form>
                <label htmlFor="autor">Nome</label>
                <Field name="autor" type="autor" placeholder="Nome"/>
                <ErrorMessage name="autor" />
                <br/>
                <label htmlFor="content">Comentário</label>
                <Field name="content" type="content" placeholder="Comentário" />
                <ErrorMessage name="content" />
                <br/>
                <button type="submit">Submit</button>
            </Form>
        </Formik>
   );
 };

 export default CommentForm; 

内容的提问来源于stack exchange，提问作者Gustavo HK