如何防止第一次重新渲染 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

好吧，我没有得到一个正常的想法。决定使用 flag with 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>
}

有什么改进的想法吗？

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

How to prevent first rerendering Formik

javascript

forms

typescript

reactjs

formik