reactjs - 使用用户身份验证反应使用状态钩子

Question

我正在学习如何使用护照 js 进行谷歌身份验证。

几乎当用户登陆我的页面时，他们没有经过身份验证，所以我有一个按钮要求他们通过谷歌登录。一旦他们登录，我会用他们的名字将他们重定向到我的主页，并简单地说他们已登录，并显示一个注销按钮。

现在这就是问题所在，在我将它们注销后，我将状态设置回 false，但它会继续以他们的名称和登录消息呈现回主页。

我以某种方式用扩展运算符修复了它，但我不知道它为什么起作用。我似乎无法绕过它。

有人可以分享一下吗？干杯。

    import { useState, useEffect } from 'react';
import * as api from '../api/index';
import Header from './Header';

function Home() {
  const [user, setUser] = useState({
    user: {},
    error: null,
    authenticated: false
  });

  useEffect(() => {
    const fetchLoggedInUser = async () => {
      try {
        const { data } = await api.loginSucess();
        setUser({ authenticated: true, user: data.user });
      } catch (error) {
        setUser({ authenticated: false, error: 'Failed to authenticate user' });
      }
    };
    fetchLoggedInUser();
  }, []);

  const handleNotAuthenticated = () => {
    setUser(...user, { authenticated: false });
  };

  return (
    <>
      <Header
        authenticated={user.authenticated}
        handleNotAuthenticated={handleNotAuthenticated}
      />
      <div>
        {!user.authenticated ? (
          'Welcome'
        ) : (
          <div>
            <h1>You have sucessfully logged in</h1>
            <h2>Welcome {user.user.firstName}</h2>
          </div>
        )}
      </div>
    </>
  );
}

export default Home;

标签： reactjs