пользовательское автосохранение формика с использованием хуков вызывает сохранение несколько раз - PullRequest
Новая
       22

пользовательское автосохранение формика с использованием хуков вызывает сохранение несколько раз

0 голосов
/ 19 июня 2020

Я изменил компонент auto save formik, который нашел в Интернете, и хотел бы исправить его, чтобы он не запускал ненужные вызовы сохранения. Я вижу, что это в основном происходит потому, что объект formik.values ​​изменяется после сохранения и вызывает еще одно сохранение, которое, хотя я могу обернуть это в useMemo, но я думаю, что он выполняет поверхностное сравнение. Как это исправить?

вот код: 

export const FormikAutoSave = ({
  debounceMs = 1000,
  onSaveStateChanged,
  onSaveFailed
}) => {

  const formik = useFormikContext();
  const [isSaved, setIsSaved] = useState(null);
  const formik_values = useMemo(() => { return formik.values }, [formik.values])

  const debouncedSubmit = useCallback(
    debounce(() => {
      console.log("submitting...");
      return formik.submitForm()
        .then(() => setIsSaved(true))
        .then( setTimeout( () => setIsSaved(null), debounceMs) );
    }, debounceMs),
    [formik.submitForm, debounceMs],
  );

  useEffect( () => {
    console.log(formik_values);
    debouncedSubmit()
  },
  [formik_values]);

  useEffect( () => {
    if(formik.isSubmitting === true) {
      onSaveStateChanged(AutoSaveState.SAVING);
    }
    else {
      onSaveStateChanged(AutoSaveState.NONE)
    }
  }, [formik.isSubmitting])


  useEffect( () => {
    if(isSaved === false) {
      onSaveFailed(AutoSaveState.FAILED);
    }
  }, [isSaved])

  return null;

};
...