React ref 和 Formik innerRef - current.values 没有得到更新

Question

我正在尝试结合使用 Formik 和 React 的 useRef 钩子来创建对我的表单的引用，然后我可以在该表单之外访问它。但是，无论我做什么，ref 中的值都不会像我期望的那样更新。

我创建了一个小例子来演示这个问题。

import React, { useEffect, useRef, useMemo } from "react";
import { render } from "react-dom";
import { Formik } from "formik";

const App = () => {
  const formRef = useRef();

  useEffect(() => {
    console.log("formRef changed", formRef.current);
  }, [formRef]);

  const email = useMemo(() => {
    if (formRef.current) {
      const email = formRef.current.values;
      return email;
    }

    return "<none>";
  }, [formRef.current?.values]); //This dependency array was a test, I tried formRef and formRef.current separately aswell.

  return (
    <div className="app">
      <Formik
        innerRef={(f) => (formRef.current = f)}
        initialValues={{ email: "asdf@test.com" }}
        onSubmit={(values) => {
          console.log(values);
        }}
      >
        {(props) => {
          const {
            values,
            isSubmitting,
            handleChange,
            handleReset,
            handleSubmit
          } = props;
          return (
            <form onSubmit={handleSubmit}>
              <label htmlFor="email" style={{ display: "block" }}>
                Email
              </label>
              <input
                id="email"
                placeholder="Enter your email"
                type="text"
                value={values.email}
                onChange={handleChange}
              />
              <button type="button" className="outline" onClick={handleReset}>
                Reset
              </button>
              <button type="submit" disabled={isSubmitting}>
                Submit
              </button>
            </form>
          );
        }}
      </Formik>
      <span>Entered e-mail: {email}</span>
    </div>
  );
};

render(<App />, document.getElementById("root"));

不幸的是，我无法让它与 Stack Snippets 一起使用，所以我制作了一个代码沙盒： https://codesandbox.io/s/formik-example-forked-0osy6?file=/index.js

我最初想这样做是因为我需要这个值与表单完全无关的地方。我考虑过只使用状态变量，但这感觉像是不必要地复制状态，但我可能错了。

非常感谢！

Answer 1

useRef 无法通知，您无法重新渲染 react 组件。 要重新渲染页面，您需要在值更新时使用 useState 来更新您的组件。