使用 ref 和 useEffect 监听 Formik 字段的变化

Question

我正在尝试使用 Formik 中的ref来让useEffect监听表单字段值的变化。 但是当我运行时：

const formikRef = useRef(); // this gets passed to Formik's ref prop on component render

React.useEffect(() => {
    // do something
}, [formikRef.current.state.values.MyFormFieldName]);

它因以下错误而失败： Cannot read property 'state' of undefined

我使用的是 Formik v1.3，我无法直接访问 Field 组件，因为我使用的是自定义包装器组件（作为内部 UI 库的一部分）并且它没有公开所有 Field 道具。

编辑：

我可以做formikRef.current?.state.values.MyFormFieldName但这仍然不会在MyFormFieldName更改时导致 useEffect 触发。

Answer 1

您会收到错误消息，因为当组件初始化时， current属性为null / undefined并且您正在尝试访问它的属性（ state ）。

另外，将钩子传递给依赖数组似乎没有你想要的效果，总之它似乎没有效果：

React Hook useEffect 有一个不必要的依赖：'formikRef.current'。 排除它或删除依赖项数组。 像“contentRef.current”这样的可变值不是有效的依赖项，因为改变它们不会重新渲染组件

您的问题的解决方法（在之前链接的文章末尾进行了描述）是在初始化后将 ref 保存在状态中：

const App = (props) => {
  const [formik, setFormik] = React.useState();

  const formikRef = (node) => {
    if (node !== null) {
      setFormik(node.getBoundingClientRect().height);
    }
  };

  React.useEffect(() => {
    // do something
  }, [formik]);

  return (
    <div ref={formikRef}>
      <span>Hello Bro</span>
    </div>
  );
};

您可以使用Codepen上的示例。