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

标签： reactjsreact-hook-form

Answer 1

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

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