javascript - 如何防止第一次重新渲染 Formik

Question

我开始使用 <AutoSave/>已创建组件 by Jared Palmer :

const AutoSave = ({debounceMs}) => {
  const formik = useFormikContext()

  const debouncedSubmit = useCallback(
    debounce(formik.submitForm, debounceMs),
    [formik.submitForm, debounceMs]
  )

  useEffect(() => debouncedSubmit, [debouncedSubmit, formik.values])

  return <>{!!formik.isSubmitting && 'saving...'}</>
}

主要问题是当我进入页面时，<AutoSave/>加载页面后提交表单，如何防止这种行为？

例子:

<Formik onSubmit={values => callMyApi(values)} initialValues={{bla: 'bla-bla'}}>
  {() => (
    //...My beautiful field components...
    <AutoSave debounceMs={300}/>
  )}
</Formik>

Answer 1

嗯，我没有得到一个正常的想法。决定使用带钩子(Hook)的标志 usePrevious:

import {useRef} from 'react'

const usePrevious = value => {
  const ref = useRef()
  const prev = ref.current
  ref.current = value
  return prev
}

现在看起来像:

const MyForm = () => {
  const [shouldUpdate, setShouldUpdate] = useState(false)
  const previousShouldUpdate = usePrevious(shouldUpdate)

  useEffect(() => {
    setShouldUpdate(true)
    return () => {setShouldUpdate(false)}
  }, [])

  <Formik onSubmit={values => {
    if (previousShouldUpdate) {
      return callMyApi(values)
    }
  }} initialValues={{bla: 'bla-bla'}}>
    {() => (
      //...My beautiful field components...
      <AutoSave debounceMs={300}/>
    )}
  </Formik>
}

有什么改进的想法吗？