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，因为我使用的是自定义包装器组件（作为内部UI库的一部分），所以无法直接访问Field组件，并且它不公开所有Field道具。

编辑：

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

Answer 1

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

此外，将钩子传递给依赖项数组似乎并没有您想要的效果，简而言之，它似乎具有no effect：

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上使用示例。

使用ref和useEffect

1 个答案: