reactjs - 将基于类的组件转换为钩子(gapi API)
问题描述
我有这个基于类的组件,它使用呈现按钮的 gapi (Google Auth) API,它可以工作:
import React from 'react';
class GoogleAuth extends React.Component {
state = { isSignedIn: null };
componentDidMount() {
window.gapi.load('client:auth2', () => {
window.gapi.client
.init({
clientId: process.env.REACT_APP_CLIENT_ID,
scope: 'email',
})
.then(() => {
this.auth = window.gapi.auth2.getAuthInstance();
this.handleAuthChange();
this.auth.isSignedIn.listen(this.handleAuthChange);
});
});
}
handleAuthChange = () => {
this.setState({ isSignedIn: this.auth.isSignedIn.get() });
};
handleSignIn = () => {
this.auth.signIn();
};
handleSignOut = () => {
this.auth.signOut();
};
renderAuthButton() {
if (this.state.isSignedIn === null) {
return null;
} else if (this.state.isSignedIn) {
return <button onClick={this.handleSignOut}>Sign Out</button>;
} else {
return <button onClick={this.handleSignIn}>Sign in with Google</button>;
}
}
render() {
return <div>{this.renderAuthButton()}</div>;
}
}
export default GoogleAuth;
我很难将其转换为使用钩子。主要问题是this.auth
......这就是类如何引用window.gapi.auth2.getAuthInstance()
我尝试了许多不同的方法,包括将身份验证保持在状态,例如:
export default function GoogleAuth() {
const [isSignedIn, setIsSignedIn] = useState(null);
const [auth, setAuth] = useState(null);
useEffect(() => {
window.gapi.load('client:auth2', () => {
window.gapi.client
.init({
clientId: process.env.REACT_APP_CLIENT_ID,
scope: 'email',
})
.then(() => {
setAuth(window.gapi.auth2.getAuthInstance());
setIsSignedIn(auth.isSignedIn.get());
auth.isSignedIn.listen(() => setIsSignedIn(auth.isSignedIn.get()));
});
});
}, [auth]);
解决方案
仅仅 8 个月后,但尝试使用下面的 auth 和 useRef。这个对我有用。
const GoogleAuth = () => {
const [isSignedIn, setSignedIn] = useState(null)
const auth = useRef(null);
useEffect(() => {
window.gapi.load('client:auth2', () => {
window.gapi.client.init({
clientId:
'jcu.apps.googleusercontent.com',
scope: 'email'
}).then(() => {
auth.current = window.gapi.auth2.getAuthInstance();
setSignedIn(auth.current.isSignedIn.get());
auth.current.isSignedIn.listen(onAuthChange)
});
});
}, [isSignedIn]);
const onAuthChange = () => {
setSignedIn(auth.current.isSignedIn.get())
}
if (isSignedIn === null) {
return (
<div>I don't know if we are signed in!</div>
);
} else if ( isSignedIn ){
return (
<div>I am signed in!</div>
);
} else {
return ( <div>I am not signed in. :(</div>);
}
}
推荐阅读
- java - 领事健康检查员
- python - Top K 常用词卡在一个部分
- npm - nvm 与 npm 配置不兼容
- javascript - 事件回调中事件监听器的优先级在哪里?
- arrays - Vuex state.array.push 在数组行内添加对象
- javascript - 实时音频网络到桌面应用程序
- node.js - 在 golang 中解密 JWE 令牌
- accelerometer - 我可以使用什么算法来计算使用加速度计和陀螺仪的步数?
- excel - 将 Word 文件表格复制到 Excel 文件(合并单元格和多行单元格)
- angular - Angular: setting ViewEncapsulation.None globally