Блог

У меня динамическая форма, состояние данных формы меняется каждый раз, когда я нажимаю 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 amp;amp;
      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 amp;amp; (
        <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>
 

reset() было бы удобно в этом случае:

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