将 useCallback 函数传递给 Formik innerRef 以监听状态变化？答案

【问题标题】：pass a useCallback function to Formik innerRef to listen for state changes?将 useCallback 函数传递给 Formik innerRef 以监听状态变化？
【发布时间】：2021-07-12 23:38:08
【问题描述】：

我想知道是否有人有将回调从 useCallback 传递到 Formik 的 innerRef 道具的经验。这个钩子我用的不多，所以我还在努力理解它。

目前，我有以下内容，它适用于从 <Formik> 组件外部触发 Formik 提交，但我正在努力根据 Formik 的 isValid 状态的更改来更新 isSavingDisabled，因为 React refs 没有t 在指定为依赖项时触发 useEffect（如 React 文档中所述）。

const MyModal = () => {

  const [isSavingDisabled, setSavingDisabled] = useState( false )
  const formikRef = useRef()

  const doSave = () => {
    if ( formikRef.current ) {
      formikRef.current.handleSubmit()
    }
  }

  return (
    <Modal>
      <ModalHeader>My Modal Header</ModalHeader>
      <ModalBody>
        <Formik innerRef={formikRef} {...formikProps}>
          { /* Form body */ }
        </Formik>
      </ModalBody>
      <ModalFooter>
        <Button disabled={isSavingDisabled} onClick={doSave}>
          Save
        </Button>
      </ModalFooter>
    </Modal>
  )
}

我需要：1) 保留对 handleSubmit 的引用，这样我就可以从 <Formik> 组件外部调用它，而且 2) 监听 Formik 状态的 isValid 属性的更改，以便我可以禁用isValid === false 时的保存按钮。

我看到useCallback，可能与useState 配对，可以用来代替useRef，但我遇到了渲染循环。谁能指出我正确的方向？提前致谢！

【问题讨论】：

标签： javascript reactjs formik

【解决方案1】：

经过大量搜索和阅读，我发现了这个：https://github.com/formium/formik/discussions/2746，它讨论了使用 useFormik 钩子和 FormikProvider 上下文提供程序。这给了我我需要的东西，我希望这种用法被正确记录。 :)

【讨论】：