[英]Ternary operator not using the useState correctly
I'm trying to update the header component based on the state and the response I get from my API server but for some reason, my updated state is having some type of errors that I cannot understand. I'm trying to update the header component based on the state and the response I get from my API server but for some reason, my updated state is having some type of errors that I cannot understand.
When my API server responds back if the username and password are correct, I get the console.log(response.data) on my browser with the properties(username, password, token).当我的 API 服务器响应用户名和密码正确时,我会在浏览器上使用属性(用户名、密码、令牌)获取 console.log(response.data)。 I can login and the token gets saved in the local session... GREAT,, However.
我可以登录,并且令牌保存在本地 session... 太好了,但是。 when I try to login with a blank username/password or any incorrect data.
当我尝试使用空白用户名/密码或任何不正确的数据登录时。 my state evaluates to true and therefore the HeaderLoggedIn component activates (not following the ternary operator ruleset) / my server responds with console;log('Incorrect username / password.');
我的 state 评估为真,因此 HeaderLoggedIn 组件激活(不遵循三元运算符规则集)/我的服务器使用控制台响应;日志('不正确的用户名/密码。'); but still the HeaderLoggedIn activates.
但 HeaderLoggedIn 仍然激活。
My useState(), initially is set to a Boolean(sessionStorage.getItem('movieappToken'). so if there's no token saved, its false and therefore it should be useState(false) - render the HeaderLoggedOut component.我的 useState() 最初设置为 Boolean(sessionStorage.getItem('movieappToken')。因此,如果没有保存令牌,则其为 false,因此应该为 useState(false) - 渲染 HeaderLoggedOut 组件。
What am I doing wrong?我究竟做错了什么? Thank you
谢谢
main Header.js component: Header.js 主要组件:
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import HeaderLoggedOut from './HeaderLoggedOut';
import HeaderLoggedIn from './HeaderLoggedIn';
function Header() {
const [loggedIn, setLoggedIn] = useState(
Boolean(sessionStorage.getItem('movieappToken'))
);
return (
<header className="header-bar bg-primary mb-3">
<div className="container d-flex flex-column flex-md-row align-items-center p-3">
<h4 className="my-0 mr-md-auto font-weight-normal">
<Link to="/" className="text-white">
ComplexApp
</Link>
</h4>
**//here's the problem**
{loggedIn ? (
<HeaderLoggedIn setLoggedIn={setLoggedIn} />
) : (
<HeaderLoggedOut setLoggedIn={setLoggedIn} />
)}
</div>
</header>
);
}
export default Header;
HeaderLoggedIn.js Component: HeaderLoggedIn.js 组件:
import React, { useEffect } from 'react';
function HeaderLoggedIn(props) {
function handleLogout() {
props.setLoggedIn(false);
sessionStorage.removeItem('movieappToken');
sessionStorage.removeItem('movieappUsername');
}
return (
<div className="flex-row my-3 my-md-0">
<a href="#" className="text-white mr-2 header-search-icon">
<i className="fas fa-search"></i>
</a>
<span className="mr-2 header-chat-icon text-white">
<i className="fas fa-comment"></i>
<span className="chat-count-badge text-white"> </span>
</span>
<a href="#" className="mr-2">
<img
className="small-header-avatar"
src={sessionStorage.getItem('complexappAvatar')}
/>
</a>
<a className="btn btn-sm btn-success mr-2" href="/create-post">
Create Post
</a>
<button onClick={handleLogout} className="btn btn-sm btn-secondary">
Sign Out
</button>
</div>
);
}
export default HeaderLoggedIn;
and HeaderLoggedOut.js Component - the one which gets data from the API server和 HeaderLoggedOut.js 组件 - 从 API 服务器获取数据的组件
import React, { useEffect, useState } from 'react';
import Axios from 'axios';
function HeaderLoggedOut(props) {
const [username, setUsername] = useState();
const [password, setPassword] = useState();
async function handleSubmit(e) {
e.preventDefault();
try {
const response = await Axios.post('http://localhost:4000/login', {
username,
password,
});
if (response.data) {
console.log(response.data);
sessionStorage.setItem('movieappToken', response.data.token);
sessionStorage.setItem('movieappUsername', response.data.username);
props.setLoggedIn(true);
} else {
console.log('Incorrect username / password.');
}
} catch (e) {
console.log('There was a problem.');
}
}
return (
<form onSubmit={handleSubmit} className="mb-0 pt-2 pt-md-0">
<div className="row align-items-center">
<div className="col-md mr-0 pr-md-0 mb-3 mb-md-0">
<input
onChange={(e) => setUsername(e.target.value)}
name="username"
className="form-control form-control-sm input-dark"
type="text"
placeholder="Username"
autoComplete="off"
/>
</div>
<div className="col-md mr-0 pr-md-0 mb-3 mb-md-0">
<input
onChange={(e) => setPassword(e.target.value)}
name="password"
className="form-control form-control-sm input-dark"
type="password"
placeholder="Password"
/>
</div>
<div className="col-md-auto">
<button className="btn btn-success btn-sm">Sign In</button>
</div>
</div>
</form>
);
}
export default HeaderLoggedOut;
API Server userController.js API 服务器 userController.js
const User = require('../models/User');
//
exports.login = function (req, res) {
let user = new User(req.body);
user
.login()
.then(function (result) {
res.send(result);
})
.catch(function (error) {
res.send(error);
});
};
API Server User.js API 服务器用户.js
const usersCollection = require('../db').collection('users');
const bcrypt = require('bcryptjs');
const validator = require('validator');
let User = function (data) {
this.data = data;
this.errors = [];
};
User.prototype.cleanUp = function () {
if (typeof this.data.username != 'string') {
this.data.username = '';
}
if (typeof this.data.email != 'string') {
this.data.email = '';
}
if (typeof this.data.password != 'string') {
this.data.password = '';
}
// get rid of any bogus properties
this.data = {
username: this.data.username.trim().toLowerCase(),
email: this.data.email.trim().toLowerCase(),
password: this.data.password,
token: `58158188ji4j1ij42jio4j1ji41oji14i${this.data.username}`,
};
};
User.prototype.validate = function () {
if (this.data.username == '') {
this.errors.push('You must provide a username');
}
if (
this.data.username != '' &&
!validator.isAlphanumeric(this.data.username)
) {
this.errors.push('Username can only contain letters and numbers');
}
if (!validator.isEmail(this.data.email)) {
this.errors.push('You must provide a valid email address');
}
if (this.data.password == '') {
this.errors.push('You must provide a password');
}
if (this.data.password.length > 0 && this.data.password.length < 7) {
this.errors.push('Password must be at atleast 7 characters');
}
if (this.data.password.length > 25) {
this.errors.push('Password cannot exceed 25 characters');
}
if (this.data.username.length > 0 && this.data.username.length < 3) {
this.errors.push('Username must be at atleast 3 characters');
}
if (this.data.username.length > 15) {
this.errors.push('Username cannot exceed 15 characters');
}
};
User.prototype.register = function () {
// Step #1: Validate user data
this.cleanUp();
this.validate();
// Step #2: Only if there are no validation errors
// then save the user data into a database
if (!this.errors.length) {
// hash user password
let salt = bcrypt.genSaltSync(10);
this.data.password = bcrypt.hashSync(this.data.password, salt);
usersCollection.insertOne(this.data);
}
};
User.prototype.login = function () {
return new Promise((resolve, reject) => {
this.cleanUp();
usersCollection
.findOne({ username: this.data.username })
.then((attemptedUser) => {
if (
attemptedUser &&
bcrypt.compareSync(this.data.password, attemptedUser.password)
) {
resolve(this.data);
} else {
reject('invalid username/password');
}
})
.catch(function () {
reject('Please try again later!');
});
});
};
module.exports = User;
You are not setting loggedIn
when getting the "incorrect username/password" response so loggedIn
remains whatever it was initially.当收到“不正确的用户名/密码”响应时,您没有设置
loggedIn
,因此loggedIn
保持最初的状态。 You can set it to false
您可以将其设置为
false
if (response.data) {
console.log(response.data);
sessionStorage.setItem('movieappToken', response.data.token);
sessionStorage.setItem('movieappUsername', response.data.username);
props.setLoggedIn(true);
} else {
props.setLoggedIn(false);
console.log('Incorrect username / password.');
} catch (e) {
props.setLoggedIn(false);
console.log('There was a problem.');
}
whatever your server response this.data
, invalid username/password
or Please try again later!
无论您的服务器响应
this.data
、 invalid username/password
还是Please try again later!
, it just response a string or an object in nature. ,它本质上只是响应一个字符串或一个 object。 So it will always enter the first judgement
所以总会进入第一个判断
if (response.data) { console.log(response.data); sessionStorage.setItem('movieappToken', response.data.token); sessionStorage.setItem('movieappUsername', response.data.username); props.setLoggedIn(true); }
I think you can add another property such as code
to help you to judge.我认为你可以添加另一个属性,例如
code
来帮助你判断。
if (response.data) { console.log(response.data); if (response.data.code === 200) { sessionStorage.setItem('movieappToken', response.data.token); sessionStorage.setItem('movieappUsername', response.data.username); props.setLoggedIn(true); } else { props.setLoggedIn(false); } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.