如何解决为什么函数没有在ReactJS的事件监听器中作为引用传递
我在ReactJS中使用功能组件。
const [showState,setState] = useState();
useEffect(() => {
document.addEventListener('click',handleClick);
return () => {
document.removeEventListener('click',handleClick);
}
},[]);
function handleClick(event) {
console.log(showState);
};
function toggleState() {
setState(true);
}
return ( <
button onClick = {
toggleState
} > Toggle < /button>
)
当我通过按下按钮切换状态时,此后,当我通过单击某处触发单击事件(handleClick
功能)时,控制台将显示“未定义”。但是handleClick
函数不是作为对click eventListener的引用传递的,当状态通过切换更改时,应在控制台中显示“ true”。
解决方法
创建函数handleClick
时,它会通过闭包捕获showState
的值,并且该值在第一个渲染时未定义。但是,当您调用toggleState
时,React不会更改showState
的值,而是会重新渲染具有新值的组件,并创建一个具有捕获到的新值的handleClick
的新实例。但是,全局侦听器仍使用undefined
存储函数的旧版本。
您可以使用useRef
或将handleClick
包装到useCallback
中并将其作为对useEffect
的依赖项来获得所需的结果。
useRef
允许您在渲染之间保留引用:
const showState = useRef();
function handleClick(event) {
console.log(showState.current);
};
function toggleState() {
showState.current = true;
}
但是,您应该记住useRef
不会触发重新渲染。
使用useCallback
:
const [showState,setState] = useState();
const handleClick = useCallback(() => {
console.log(showState);
},[showState]);
useEffect(() => {
document.addEventListener('click',handleClick);
return () => {
document.removeEventListener('click',handleClick);
}
},[handleClick]);
通过这种方式,每次showState
更改创建的handleClick
的新实例时,都会在闭包中添加新值,并触发useEffect
重新附加事件侦听器。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。