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

Question

i'm new on react and i'm building a react website, i came across a doubt on how to show the username of the person who logged in my page and i would like when the person logs in, the state change from 'hi, sign in' to 'hello x person':

My backend login: (express)

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" });
    }
  }
);
});

My navbar page with axios, i tried to put the states and the call em' into 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;

so after that, i want that after logging in change the state from 'hi, sign in' to 'hello x person'. I put the axios.get and then the states that i called into navlink, unfortunately it doesn't work, how could fix that? thanks!!

Answer 1

This

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

should be like below. setLoginStatus is a function, you need the value to be printed

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

and don't send user credentials in GET, use POST

Still if you are not getting check what do you have in response.data[0].username

Answer 2

You are checking setting userName state to be "", but never setting it anywhere. setUsername is not called anywhere. Instead of

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

You should use

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