如何解决使用ref和useEffect
我正在尝试在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触发。
解决方法
由于在初始化组件时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上使用示例。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。