为 Formik 的 innerRef 获取 null

Question

When I try to get reference on formik, I get null in current field of ref object.

const formikRef = useRef();
...

  <Formik
    innerRef={formikRef}
    initialValues={{
      title: '',
    }}
    onSubmit={(values) => console.log('submit')}
  >

And next:

useEffect(() => {

    console.log(formikRef);
  }, []);

Get:

Object {
  "current": Object {
    "current": null,
  },
}

How can I fix this problem? Help please.

Answer 1

If you want to call submit function outside Formik, you can use useImperativeHandle . Document

// Children Component

const Form = forwardRef((props, ref) => {
  const formik = useFormik({
    initialValues,
    validationSchema,
    onSubmit,
    ...rest // other props
  })

  useImperativeHandle(ref, () => ({
    ...formik
  }))

  return ** Your form here **
})

and using:

// Parent Component

const Parent = () => {
  const formRef = useRef(null)

  const handleSubmitForm = (values, actions) => { 
    // handle logic submit form
  }

  const onSubmit = () => {
    formRef.current.submitForm()
  }

  return (<>
    <Form ref={formRef} onSubmit={handleSubmitForm} />
    <button type="button" onClick={onSubmit}>Submit</button>
   </>)
}

Answer 2

Read the ref only when it has value, and add the dependency in useEffect on the ref.

useEffect(() => {
    if (formikRef.current) {
        console.log(formikRef);
    }
  }, [formikRef]);

Remember, that refs handle it's actual value in .current property.

Answer 3

What worked for me was adding variables inside useEffect's []. For my case, it was [ref.current, show] .

Add an if(ref.current) {...} before any ref.current.setFieldValue in useEffect body as well or ref.current?.setFieldValue .

This cost me several hours, I hope you're better off.