我真的很难理解如何删除谷歌gapi事件监听器。下面粗体是所讨论的完整功能。
window.gapi.auth2.getAuthInstance().isSignedIn.listen(onAuthChange);
我想在 useEffect 挂钩中使用清理函数来删除事件侦听器,但执行此操作的实际代码...我认为与简单的 javascript“removeEventListener”不同?我在谷歌文档中找不到任何内容。我的问题是我需要知道其他页面上的身份验证状态何时发生变化,并且需要其他函数在事件触发时运行(身份验证状态更改) - 但由于原始版本不断运行,我最终得到了一堆不必要的函数调用。当您登录和退出时,情况会变得更糟......随着事件侦听器的累积。
import React, { useEffect, useContext, useState } from "react";
import history from "../history";
import { GeneralContext } from "../contexts/General";
const GoogleAuth = () => {
const { state, setState } = useContext(GeneralContext);
const onAuthChange = () => {
const auth = window.gapi.auth2.getAuthInstance();
setState({ authStatus: auth.isSignedIn.get() });
if (auth.isSignedIn.get() === true) {
const token = auth.currentUser.fe.qc.access_token;
setState({ accessToken: token });
}
};
// Check auth status on mount
useEffect(() => {
window.gapi.load("client:auth2", () => {
window.gapi.client
.init({
clientId:
"320808104510-qjdjiooodidc8jm1i000oteqc7h63029.apps.googleusercontent.com",
scope: "https://www.googleapis.com/auth/books",
})
.then(() => {
const auth = window.gapi.auth2.getAuthInstance();
//setState({ authStatus: auth.isSignedIn.get() });
console.log("Event listender mounted on Sign-in Page");
auth.isSignedIn.listen(onAuthChange);
});
});
}, []);
const onClick = () => {
console.log(state.authStatus);
const auth = window.gapi.auth2.getAuthInstance();
auth.signIn();
//setState({ authStatus: auth.isSignedIn.get() });
};
// Proceed to next page if user Signs into Google
const proceed = () => {
//Verify sign in
if (state.authStatus === true) {
//console.log("I am signed in");
history.push("/home");
}
};
// Runs after state updates
useEffect(() => {
proceed();
return () => {
// console.log("GoogleAuth Unmounted");
// const auth = window.gapi.auth2.getAuthInstance();
// window.removeEventListener(onAuthChange(), auth.isSignedIn.listen()); <--This is my attempt to remove the event listender, but it didn't work!
};
}, [state.authStatus]);
return (
<React.Fragment>
<div to="/" className="login btn" onClick={onClick}>
Sign in with Google
<svg className="google__svg">
<use xlinkHref="img/sprite.svg#icon-google"></use>
</svg>
</div>
</React.Fragment>
);
};
export default GoogleAuth;
我遇到了同样的问题,并且找不到任何文档来指导我正确的方向。虽然我找到的文档和打字稿都表明auth.isSignedIn.listen()
没有返回值,检查浏览器控制台中的返回值发现情况并非如此。
它返回一个对象,该对象有一个remove()
其原型上的方法。添加监听器时保存返回的对象,并调用它的remove
清理中的方法。
useEffect(
() => {
let listenerContext;
window.gapi.load('client:auth2', () => {
window.gapi.client.init({
clientId,
discoveryDocs: [...DISCOVERY_DOCS],
scope: SCOPES,
}).then(() => {
const auth = window.gapi.auth2.getAuthInstance();
listenerContext = auth.isSignedIn.listen(onSigninChange);
// ... etc
});
});
return () => {
listenerContext?.remove();
};
},
[],
);
因为我找不到任何文档,所以我不能声称这是一个稳定的长期功能。至少,我希望它能帮助你在你的项目中畅通无阻。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)