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

Question

我想知道是否有人有将回调从useCallback传递到 Formik 的innerRef道具的经验。 我还没有经常使用这个钩子，所以我仍然试图更好地理解它。

目前，我有以下内容，它适用于从<Formik>组件外部触发 Formik 提交，但我正在努力根据 Formik 的isValid状态的更改更新isSavingDisabled ，因为 React refs 在指定为 a 时不会触发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时禁用保存按钮isValid === false 。

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

Answer 1

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