react-hook-form 触发后如何删除 onSubmit 数据负载？

Question

我有一个动态表单，每次触发onSubmit按钮，表单数据状态都会发生变化，问题是即使表单发生变化，旧表单状态的旧数据并没有被删除

const onSubmit = (data) => {
  const formData = new FormData();
  console.log({ form, data }); // <- I want to delete data everytime submit is triggered
  let dataPayload = {};
  for (const key in data) {
    if (formIndex === 2) {
      dataPayload = data;
      return dispatch(postData({ dataPayload, formIndex, url }));
    } else {
      let item = data[key];
      if (typeof item === "object") {
        item[0] ? formData.append(key, item[0]) : formData.append(key, "");
      } else {
        formData.append(key, item);
      }
    }
  }
  dataPayload = formData;
  dispatch(postData({ dataPayload, formIndex, url }));
};

案例

• 首先提交： 数据有 17 个属性 表单有 17 个元素

• 第二次提交 数据有 27 个属性 表单有 10 个元素

• 第三次提交 数据有 33 个属性 表单有 6 个元素

我的组件

<form autoComplete='off' onSubmit={handleSubmit(onSubmit)}>
    {form.length > 0 &&
      form.map((el) => (
        <Input
          key={el.id}
          item={el.id}
          placeholder={el.data.placeholder}
          type={el.data.type}
          element={el.data.element}
          register={register}
        />
      ))}
    <Container>
      {!complete && (
        <Button
          fullWidth
          style={{ margin: "10px auto" }}
          color='secondary'
          type='submit'
          variant='contained'
          endIcon={loading ? <CircularProgress size={10} color='info' /> : <NavigateNext />}>
          {formIndex !== 2 ? "Next" : "Generate Link"}
        </Button>
      )}
    </Container>
  </form>

Answer 1

reset() 在这种情况下会很方便：

const { register, handleSubmit, reset } = useForm();
const onSubmit = (data) => {
  // do your own thing
   reset(); // wipe out the old data
}