Я просто не понимаю, почему имя пользователя, пришедшее с моей конечной точки, не отображается в браузере при успешной аутентификации (когда пользователь успешно входит в систему, используя свои учетные данные). Когда пользователь входит в систему, я хочу, чтобы его приветствовали простым Hello, *name*, но *name* не отображается. Я успешно получаю имя через console.log(response.data[0].name);, поэтому я знаю, что имя определенно звучит, исходя из того, что я вижу в консоли.
Я пробовал перечислить слишком много способов для решения этой проблемы, но у меня закончились варианты. Я знаю, что это что-то незначительное, я не замечаю, но просто не могу заметить, что, мне просто нужна еще пара глаз, чтобы увидеть, что не так в моем коде.
Как я могу это решить?
Вот компонент входа в систему:
import React, { Component } from 'react';
import { Link, Redirect } from "react-router-dom";
import axios from "axios";
import Cookies from 'js-cookie';
class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
remember_me: true,
name: '',
logged_in_flag: false,
access_token: null,
auth: false
}
this.emailHandler = this.emailHandler.bind(this);
this.passwordHandler = this.passwordHandler.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
emailHandler(e) {
this.setState({
email: e.target.value,
});
}
passwordHandler(e) {
this.setState({
password: e.target.value,
});
}
handleSubmit(e) {
e.preventDefault();
const user = {
email: this.state.email,
password: this.state.password,
remember_me: this.state.remember_me
}
JSON.stringify(user);
const headers = {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
const { history } = this.props;
axios.post('http://127.0.0.1:8000/api/auth/login', user, {headers})
.then(response => {
console.log(response.data[0].name);
console.log(response.data.access_token);
let set_access_token = Cookies.set("access_token", response.data.access_token);
this.setState({
logged_in_flag: true,
name: response.data[0].name,
access_token: set_access_token,
auth: true
});
Cookies.set("access_token", this.state.access_token);
history.push('wall-of-fame');
}).catch(error => {
console.log("AXIOS ERROR!! " + error);
});
}
render() {
const {name, auth} = this.state;
console.log(this.state.name);
console.log(this.state.auth);
if(auth) {
console.log("ARE WE HERE");
return(
<Redirect to={{
pathname: "/wall-of-fame",
state: {name: name}
}} />
);
}
return(
<div id="login">
<div className="container">
<div id="login-row" className="row justify-content-center align-items-center">
<div id="login-column" className="col-md-6">
<div id="login-box" className="col-md-12">
<form id="login-form" className="form" method="post" onSubmit={this.handleSubmit}>
<div className="form-group">
<label htmlFor="email" className="text-info">Email:</label><br/>
<input type="text" name="email" id="email" className="form-control" onChange={this.emailHandler}/>
</div>
<div className="form-group">
<label htmlFor="password" className="text-info">Password:</label><br/>
<input type="password" name="password" id="password" className="form-control" onChange={this.passwordHandler}/>
</div>
<Link to='/wall-of-fame'>
<div className="form-group">
<input type="submit" name="submit" className="btn btn-info btn-md" value="Submit"/>
</div>
</Link>
<Link to="/register">
<div id="register-link" className="text-right">
<a href="#" className="text-info">Register here</a>
</div>
</Link>
</form>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Login;
Вот компонент стены:
import React, { Component } from 'react'
import { withRouter } from "react-router-dom";
class Wall extends Component {
constructor(props) {
super(props);
}
render() {
return(
<h1>Hello, {this.props.name}!</h1>
);
}
}
export default withRouter(Wall);
Вот компонент приложения:
import React, {Component} from 'react';
import {Switch, Route, Redirect} from 'react-router-dom';
import Login from './components/Login/Login';
import Wall from './components/Wall/Wall';
import Cookies from 'js-cookie';
class App extends Component {
constructor(props) {
super(props);
this.state = {
auth: false
};
}
componentDidMount() {
// I'm not Unsure if I need to do anything here
if(Cookies.get("access_token") !== null) {
console.log("it's true!");
this.setState({auth: true});
} else {
console.log("it's false");
}
}
render() {
return (
<React.Fragment>
<Switch>
<Route path="/login" component={Login}/>
<Route path="/wall-of-fame" component={Wall}/>
</Switch>
</React.Fragment>
);
}
}
export default App;