刷新反应页面后出现一些错误

问题描述 投票:0回答:1

我正在 React 页面中使用 Google 创建基本身份验证。

刷新页面后出现错误无法读取未定义的属性(读取“帐户”)

但是启动页面并在多次刷新页面并清除控制台后,错误消失了

再次出现错误。

这是使用谷歌身份验证的正确脚本吗?因为使用这个后我得到了一个错误,但是google没有定义但是我必须在App.js页面中定义google。

请让我知道实际错误在哪里。我认为错误位于index.html中的script下。

index.html

<script src="https://accounts.google.com/gsi/client" async defer></script>

App.js

import './App.css';
import { useEffect, useState } from 'react';
import jwt_decode from "jwt-decode";

const google = window.google;


function App() {

  const [ user, setUser ] = useState({});

  function handleCallbackResponse(response) {
    console.log("Encoded JWT ID token: " + response.credential);
    var userObject = jwt_decode(response.credential);
    console.log(userObject);
    
    setUser(userObject);
    document.getElementById("signInDiv").hidden = true;
  }


  function handleSignOut(event) {
    setUser({});
    document.getElementById("signInDiv").hidden = false;
  }

  useEffect(() => {

    // google from script in index.html

    google.accounts.id.initialize({
      client_id: "xxx",
      callback: handleCallbackResponse
    });

    google.accounts.id.renderButton(
      document.getElementById("signInDiv"),
      { theme: "outline", size: "large" }
    );

    google.accounts.id.prompt();

  }, []);
  
  // If there is signed in user then show sign out button
  // If there is no user then show sign in button

  return (
    <div className="App">
      <div id="signInDiv"></div>
        { 
          Object.keys(user).length != 0 &&
          <button onClick={(e) => handleSignOut(e)}>Sign Out</button>
        }

        { user &&
          <div>
            <img src={user.picture} alt="" />
            <h3>{user.name}</h3>
          </div>
        }
    </div>
  );
}

export default App;
reactjs google-oauth
1个回答
0
投票

问题是您正在加载 SDK 的

async defer
标签上有
<script />
。这基本上意味着代码并不重要,浏览器可以根据需要加载您的代码。当您重新加载页面时,
SDK
有可能在
useEffect
运行之前运行,在这种情况下它将起作用。如果
useEffect
首先运行,那么
google
将是
undefined
。您应该查看 SDK 文档,看看他们是否有某种机制告诉您何时完全加载并准备就绪(例如他们可能会调度一个事件或其他内容)。否则,您可以从
async defer
中删除
script
,尽管我不推荐这样做

© www.soinside.com 2019 - 2024. All rights reserved.