如何使用 axios 更改 reactjs 中用户名的状态？

Question

我是 react 新手，我正在建立一个 react 网站，我对如何显示登录我页面的人的用户名有疑问，我想当这个人登录时，状态改变从“嗨，登录”到“你好 x 人”：

我的后台登录：（快递）

app.get("/login", (req, res) => {
if (req.session.user) {
  res.send({ loggedIn: true, user: req.session.user });
} else {
  res.send({ loggedIn: false });
}
 });

 app.post("/login", (req, res) => {
const username = req.body.username;
const password = req.body.password;

db.query(
  "SELECT * FROM credenziali WHERE username = ?;",
  username,
  (err, result) => {
    if (err) {
      res.send({ err: err });
    }

    if (result.length > 0) {
      bcrypt.compare(password, result[0].password, (error, response) => {
        if (response) {
          req.session.user = result;
          console.log(req.session.user);
          res.send(result);
        } else {
          res.send({ message: "Wrong username/password combination!" });
        }
      });
    } else {
      res.send({ message: "User doesn't exist" });
    }
  }
);
});

我的带有 axios 的导航栏页面，我尝试将状态和调用 em' 放入 navlink：

import React, { useState, useEffect } from 'react';
import { IconContext } from 'react-icons/lib';
import { FaBars, FaTimes } from 'react-icons/fa';
import { SignIn }  from '../Buttons/Button/Button';
import Axios from 'axios';
import { Link } from 'react-router-dom';
import styled from 'styled-components'
import './Navbar.css';
import Horizzontal from './Dropdown/Dropdown';
import { useStateValue } from "../../StateProvider";


function Navbar() {

const [{ basket, user }, dispatch] = useStateValue();

const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [loginStatus, setLoginStatus] = useState("");


const login = () => {
 Axios.get("http://localhost:3001/login", {
  username: username,
  password: password,
 }).then((response) => {
  if (response.data.message) {
    setLoginStatus(response.data.message);
  } else {
    setLoginStatus(response.data[0].username);
  }
});
};

const [click, setClick] = useState(false);
const [dropdown, setDropdown] = useState(false);

const handleClick = () => setClick(!click);
const closeMobileMenu = () => setClick(false);

const onMouseEnter = () => {
if (window.innerWidth < 960) {
  setDropdown(false);
} else {
  setDropdown(true);
}
};

const onMouseLeave = () => {
if (window.innerWidth < 960) {
  setDropdown(false);
} else {
  setDropdown(false);
}
};

return (
<>
  <IconContext.Provider value={{ color: '#fff' }}>
  <Nav>
    <NavLink to='/Login' className='navbar-logo' onClick={closeMobileMenu} onChange={login}>
    {!username ? 'Hi, Sign In!' : {setLoginStatus}}
    </NavLink>
    <div className='menu-icon' onClick={handleClick}>
        {click ? <FaTimes /> : <FaBars />}
    </div>
    <NavMenu>
    <ul className={click ? 'nav-menu active' : 'nav-menu'}>
      <li className='nav-item'>
        <Link to='/' className='nav-links' onClick={closeMobileMenu}>
          Home
        </Link>
      </li>
      <li
        className='nav-item'
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
      >
        <Link
          to='/services'
          className='nav-links'
          onClick={closeMobileMenu}
        >
          Services <i className='fas fa-caret-down' />
        </Link>
        {dropdown && <Horizzontal />}
      </li>
      <li className='nav-item'>
        <Link
          to='/ourwb'
          className='nav-links'
          onClick={closeMobileMenu}
        >
          Our Website
        </Link>
      </li>
      <li className='nav-item'>
        <Link
          to='/contact-us'
          className='nav-links'
          onClick={closeMobileMenu}
        >
          Contact Us
        </Link>
      </li>
      <li>
        <Link
          to='/Login'
          className='nav-links-mobile'
          onClick={closeMobileMenu}
        >
          Sign In
        </Link>
      </li>
    </ul>
    </NavMenu>
    <NavBtn>
    <SignIn/>
    </NavBtn>
    <NavLink to='/checkout' className='cart-logo'><i class="fal fa-shopping-cart"></i></NavLink>
    </Nav>
   </IconContext.Provider>
  </>
 );
 }

 export default Navbar;

所以在那之后，我希望在登录后将状态从“嗨，登录”更改为“你好 x 人”。我将 axios.get 然后我调用的状态放入 navlink，不幸的是它不起作用，如何解决这个问题？谢谢！！

Answer 1

这个

{!username ? 'Hi, Sign In!' : {setLoginStatus}}

应该如下所示。 setLoginStatus是一个函数，需要打印出来的值

{!username ? 'Hi, Sign In!' : loginStatus}

不要在 GET 中发送用户凭据，请使用 POST

如果您没有收到，请检查response.data[0].username 中的内容

Answer 2

您正在检查将用户名状态设置为“”，但从未在任何地方设置它。 setUsername 不会在任何地方调用。 而不是

{!username ? 'Hi, Sign In!' : {setLoginStatus}}

你应该使用

{ !loginStatus ? 'Hi, Sign In!' : loginStatus }
// or simply
{ loginStatus || 'Hi, Sign In!' }