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);
            });
    };