Verwenden Sie Formik, um ein Formular vor dem Absenden zurückzusetzen

Question

Nachdem Sie auf die Schaltfläche „Senden“ geklickt haben, wird das Formular vor dem Absenden zurückgesetzt.

Ich habe mit Formik ein Formular erstellt. Ich versuche, Formiks resetForm zu verwenden, um das Formular nach dem Absenden zurückzusetzen. Aber es setzt das Formular vor dem Absenden zurück und sendet ein leeres Formular. Das ist mein Formular:

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

Ich bin mir nicht sicher, ob ich die handleFormSubmit-Funktion teilen soll, aber hier ist sie:

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

删除 onClick={resetForm} ：

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

然后在你的 handleFormSubmit 中：

...

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

如果对你有用，请告诉我。