Formik表单点击提交时提前重置，提交空表单的问题求助

嘿，我一眼就看出问题所在啦！你现在把resetForm直接绑定在了提交按钮的onClick事件上，这会导致一个顺序问题：点击按钮时会先执行表单重置，之后才触发表单的提交逻辑——这时候表单已经被清空了，自然提交的就是空数据咯！

解决思路 #

我们需要把表单重置的逻辑放在提交成功之后执行，而不是点击按钮的瞬间。Formik已经为我们提供了两种便捷的方式来实现：

方法1：利用handleFormSubmit的第二个参数onSubmitProps

Formik的onSubmit回调会自动传入onSubmitProps对象，里面包含了resetForm方法，我们可以在请求成功后调用它：

首先先把按钮上的onClick={resetForm}删掉，恢复提交按钮的默认行为：

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

然后修改你的handleFormSubmit函数，在请求成功后添加重置逻辑：

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

  try {
    const res = await fetch(`http://localhost:5000/api/home-profile/${data[0]._id}`, {
      method: "PUT",
      body: formData,
      headers: {
        Authorization: "Bearer " + token,
      },
    });
    console.log(res.status);
    // 提交成功后才重置表单
    onSubmitProps.resetForm();
  } catch (err) {
    console.log(err);
  }
};

方法2：在Formik的render回调中处理（可选）

如果你更倾向于在组件内部控制重置时机，也可以在Formik的render回调中拿到resetForm，并在提交成功后调用。比如可以修改表单的onSubmit逻辑：

{({
  values,
  handleBlur,
  handleChange,
  handleSubmit,
  setFieldValue,
  resetForm, // 拿到resetForm方法
}) => (
  <form onSubmit={(e) => {
    handleSubmit(e).then(() => {
      // 提交成功后重置表单
      resetForm();
    });
  }}>
    <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>Add Picture Here</p>
          ) : (
            values.picture.name
          )}
        </div>
      )}
    </Dropzone>
    <button type="submit"> gönder</button>
  </form>
)}

为什么原来的写法会出错？ #

HTML元素的事件触发是有顺序的：按钮的onClick事件会优先于表单的onSubmit事件执行。所以你点击按钮时，resetForm先把表单清空了，等handleSubmit执行时，拿到的已经是重置后的空值了。

备注：内容来源于stack exchange，提问作者M. Selim Yaman