為什么登錄成功后選單欄中沒有顯示用戶名而不顯示登錄圖示？

所以我有一個問題，我設定了前端，以便當用戶登錄時，選單欄中的登錄按鈕將更改為顯示當前登錄的用戶名，下拉串列顯示用戶組態檔和注銷按鈕. 但是每次我用用戶登錄時，選單欄中的登錄并沒有改變，即使在控制臺中說用戶已經登錄，我仍然可以回傳登錄螢屏并再次登錄.

下面是代碼：

導航欄

function Navbar() {
  const [showLinks, setShowLinks] = useState(false);
  const { state, dispatch: ctxDispatch } = useContext(Store);
  const { cart, userInfo } = state;

  const handleLogout = () => {
    ctxDispatch({ type: 'USER_LOGOUT' });
    localStorage.removeItem('userInfo');
  };
console.log(userInfo);

<div className="rightSide">
        <div className="linksTwo">
         {/* {userInfo ? (
            <NavDropdown id="nav-dropdown-light" title= {userInfo.name}>
              <LinkContainer to="/profile">
                <NavDropdown.Item> User Profile</NavDropdown.Item>
              </LinkContainer>
              <NavDropdown.Divider />
              <Link
                className="dropdown-item"
                to="#logout"
                onClick={handleLogout}
              >
                {' '}
                Logout
              </Link>
            </NavDropdown>
          ) : ( */}
            <Link to="/login">
              Login <LoginIcon />
            </Link>
         {/* )} */}
        </div>
      </div>

登錄

import Axios from 'axios';
import { useContext, useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
import Button from 'react-bootstrap/Button';
import { Helmet } from 'react-helmet-async';
import { Store } from '../components/Store';
import { toast } from 'react-toastify';
import { getError } from '../utils';

export default function Login() {
  const navigate = useNavigate();
  const { search } = useLocation();
  const redirectInUrl = new URLSearchParams(search).get('redirect');
  const redirect = redirectInUrl ? redirectInUrl : '/profile';

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const { state, dispatch: ctxDispatch } = useContext(Store);
  const { userInfo } = state;

  function validateForm() {
    return email.length > 0 && password.length > 0;
  }

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!password) {
      toast.warn('Password is not correct');
      return;
    }
    try {
      const { data } = await Axios.post('/api/users/login', {
        email,
        password,
      });
      ctxDispatch({ type: 'USER_LOGIN', payload: data });
      localStorage.setItem('userInfo', JSON.stringify(data));
      navigate(redirect || '/profile');
      toast.success(email   ' has logged in successfully');
    } catch (err) {
      toast.error(getError(err));
    }
  };

  return (
    <Container className="small-container">
      <Helmet>
        <title>Login</title>
      </Helmet>
      <h1 className="my-3">Login</h1>
      <Form onSubmit={handleSubmit}>
        <Form.Group className="mb-3" controlId="email">
          <Form.Label>Email</Form.Label>
          <Form.Control
            type="email"
            required
            onChange={(e) => setEmail(e.target.value)}
          />
        </Form.Group>
        <Form.Group className="mb-3" controlId="password">
          <Form.Label>Password</Form.Label>
          <Form.Control
            type="password"
            required
            onChange={(e) => setPassword(e.target.value)}
            autoComplete="on"
          />
        </Form.Group>
        <div className="m-3">
          <Button
            type="submit"
            className="btn btn-outline-success me-2"
            disabled={!validateForm()}
          >
            Login
          </Button>
        </div>
        <div className="m-3">
          New customer? <Link to={`/register`}>Register a new account</Link>
        </div>
      </Form>
    </Container>
  );
}

uj5u.com熱心網友回復：

在登錄組件中，您正在執行以下操作：

  const { state, dispatch: ctxDispatch } = useContext(Store);

在導航欄組件中，您正在執行以下操作：

  const { state, userInfo, dispatch: ctxDispatch } = useContext(Store);

我猜你只是在導航欄中破壞了你的背景關系，嘗試：

const { state, dispatch: ctxDispatch } = useContext(Store);
const { userInfo } = state;

或者您也可以將其縮寫為：
const { state: { userInfo }, dispatch: ctxDispatch } = useContext(Store);

標籤：验证 反应钩子 导航栏 登出

上一篇：Keycloak：繞過驗證器流程

下一篇：Djangoauth組沒有找到組并且不授予用戶權限，無論他們在哪個組中