javascript - 如何使用 axios 更改 reactjs 中用户名的状态?
问题描述
我是 react 新手,我正在建立一个 react 网站,我对如何显示登录我页面的人的用户名有疑问,我想当这个人登录时,状态从“嗨”改变, 登录到 'hello x person':
我的后台登录:(快递)
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,不幸的是它不起作用,如何解决这个问题?谢谢!!
解决方案
这个
{!username ? 'Hi, Sign In!' : {setLoginStatus}}
应该如下所示。setLoginStatus
是一个函数,你需要打印的值
{!username ? 'Hi, Sign In!' : loginStatus}
并且不要在 GET 中发送用户凭据,请使用 POST
如果你没有得到检查你有什么response.data[0].username
推荐阅读
- python - 如何在 python 中设置 protobuf Timestamp 字段?
- android-emulator - 如何通过 Android 模拟器将 ngrok 与 Okta 结合使用
- ruby - 来自调用的 RSpec 双/模拟打印方法
- python - Python NameError:名称未定义但无法捕获错误
- javascript - 第二次单击时关闭弹出窗口
- bots - discord.py 反应获得角色
- flutter - 颤振 | 应用程序加载后加载数据表
- java - 在模拟器中尝试和测试时反应原生应用程序错误(?)
- c# - 为什么检查角色需要跨分区查询?
- reactjs - 在 React 中使用地图时如何摆脱“关键”错误?