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

【问题标题】：How to prevent first rerendering Formik如何防止第一次重新渲染 Formik
【发布时间】：2020-04-01 11:15:23
【问题描述】：

我开始使用<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>

【问题讨论】：

{() => ( )}你为什么在那里使用函数？
@Deda，我应该改用什么？检查 Formik 2 版本，不推荐使用渲染道具

标签： javascript reactjs typescript forms formik

【解决方案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>
}

有什么想法可以让它变得更好吗？

【讨论】：