Gunakan Formik untuk menetapkan semula borang sebelum menyerahkannya

Question

Selepas mengklik butang hantar, borang akan ditetapkan semula sebelum dihantar.

Saya mencipta borang menggunakan Formik. Saya cuba menggunakan resetForm Formik untuk menetapkan semula borang selepas penyerahan. Tetapi ia menetapkan semula borang sebelum menyerahkan dan menyerahkan borang kosong. Ini borang saya:

<Formik
            onSubmit={handleFormSubmit}
            initialValues={{
                content: "",
                picture: "",
            }}
        >
            {({
                values,
                handleBlur,
                handleChange,
                handleSubmit,
                setFieldValue,
                resetForm,
            }) => (
                <form onSubmit={handleSubmit}>
                    <Field
                        as="textarea"
                        onBlur={handleBlur}
                        onChange={handleChange}
                        value={values.content}
                        name="content"
                    />

                    <Dropzone
                        acceptedFiles=".jpg, .jpeg, .png"
                        multiple={false}
                        onDrop={(acceptedFiles) =>
                            setFieldValue("picture", acceptedFiles[0])
                        }
                    >
                        {({ getRootProps, getInputProps }) => (
                            <div {...getRootProps()}>
                                <input {...getInputProps} />
                                {!values.picture ? (
                                    <p>在这里添加图片</p>
                                ) : (
                                    values.picture.name
                                )}
                            </div>
                        )}
                    </Dropzone>
                    <button type="submit" onClick={resetForm}>提交</button>
                </form>
            )}
        </Formik>

Saya tidak pasti sama ada saya perlu berkongsi fungsi handleFormSubmit, tetapi inilah:

const handleFormSubmit = async (values, onSubmitProps) => {
        const formData = new FormData();
        for (let value in values) {
            formData.append(value, values[value]);
        }
        formData.append("picturePath", values.picture.name);
        fetch(`http://localhost:5000/api/home-profile/${data[0]._id}`, {
            method: "PUT",
            body: formData,
            headers: {
                Authorization: "Bearer " + token,
            },
        })
            .then((res) => {
                console.log(res.status);
            })
            .catch((err) => {
                console.log(err);
            });
    };

Answer 1

Alih keluar onClick={resetForm}:

<button type="submit"> gönder</button>

Kemudian dalam pemegang andaFormSubmit:

...

.then((res) => {
    console.log(res.status);
})
.catch((err) => {
    console.log(err);
})
.finally(() => {
    resetForm(); //this
});

Jika ini sesuai untuk anda, sila beritahu saya.