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

Question

我正在尝试使用 ref在 Formik 出租 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 Prop 。
编辑:
我可以做 formikRef.current?.state.values.MyFormFieldName但这仍然不会导致 useEffect 在 MyFormFieldName 时触发变化。

Answer 1

您会收到错误消息，因为当组件初始化时，current属性是 null / undefined并且您正在尝试访问它的属性( state )。
另外，把hook传给依赖数组好像没有你想要的效果，总之好像有no effect :

React Hook useEffect has an unnecessary dependency: ‘formikRef.current’. Either exclude it or remove the dependency array. Mutable values like ‘contentRef.current’ aren’t valid dependencies because mutating them doesn’t re-render the component

您的问题的解决方法(在之前链接的文章末尾进行了描述)是在初始化后将 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 上玩这个例子.