我通过应用一些自己的逻辑来创建一个简单的登录应用程序。身份验证成功,登录后我需要重定向到另一个组件,并且需要将名称从登录组件获取到我的家庭组件,以便在该组件中显示为“ Welcome -name-”
我尝试将道具传递给,但没有成功
这是我的Login.js:
import React, { Component } from 'react';
import axios from 'axios';
// import Loader from 'react-loader-spinner';
import { Link, Route, Redirect } from 'react-router-dom';
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import './Login.css';
import Home from '../Home/Home'
class Login extends Component {
state = {
email: null,
password: null,
status: null,
name: null
}
submitHandler = (event) => {
event.preventDefault();
console.log(this.state);
axios.get("http://localhost:5000/login/" + this.state.email + "/" + this.state.password).then((res) => {
this.setState({ status: res.status, name: res.data.name });
console.log(this.state);
});
}
changeHandler = (event) => {
event.preventDefault();
const { name, value } = event.target;
this.setState({ [name]: value });
}
render() {
const home = <Home />
return (<div className="wrapper">
<div className="form-wrapper">
<h1>Login</h1>
<form onSubmit={this.submitHandler} noValidate>
<div className="email">
<label htmlFor="email">Email</label>
<input type="text" placeholder="Email" name="email" noValidate onChange={this.changeHandler} />
</div>
<div className="password">
<label htmlFor="password">Password</label>
<input type="password" placeholder="Password" name="password" noValidate onChange={this.changeHandler} />
</div>
<div className="login">
<button type="submit">Login</button>
</div>
<div>
{((this.state.status) && this.state.status === 200) ? <Redirect to="/home" /> : null}
</div>
</form>
</div>
</div>);
}
}
export default Login;
这是我的Home.js:
import React from 'react';
const Home = (props)=>{
return(<h1>Welcome {props.name}</h1>);
}
export default Home;
我只需要在成功提交表单后将Home.js中的输出显示为“ Welcome -name-”。但是,该名称处于Login.js的状态。请帮助我。
答案 0 :(得分:0)
我相信这是问题所在。将js对象或元素等放入字符串中时,需要指定您要通过将字符串用反引号引起来添加对象。尝试将文本放在标签中的引号中,并在js对象(传递的道具)前加一个美元符号。这让React知道该字符串还将包含js,而不仅仅是文本字符串。在您的情况下,您可能还需要像下面这样的“ this”绑定:
<h1>`Welcome, ${this.props.name}`</h1>
我不确定如何解释“这个”,也许其他人可以进一步阐明。以下是Home.js文件上下文中的代码更改。
import React from 'react';
const Home = (props)=>{
return(<h1>`Welcome ${props.name}`</h1>);
}
export default Home;
我希望这会有所帮助!祝您应用愉快:)
答案 1 :(得分:0)
您的选择很少。
干杯
答案 2 :(得分:0)
您有多个解决此问题的方法,但我注意到您正在使用react-router-dom
,因此您可以执行以下操作之一:
将用户名作为url参数传递:
<Route path="/home/:username" component={Home} />;
const Home = (props)=>{
return(<h1>Welcome {props.match.params.username}</h1>);
}
并这样重定向:
<Redirect to="/home/john-doe" />
redux
将变量存储在全局存储中,并从任何地方访问它们。constants.js:
export const SET_USERNAME = 'SET_USERNAME'
action.js:
import {SET_USERNAME} from './constants'
export function setUsername(payload) {
return {
type: SET_USERNAME,
payload,
};
}
reducer.js:
import {
SET_USERNAME,
} from './constants';
export const initialState = {
username: '',
};
export function userReducer(state = initialState, action) {
switch (action.type) {
case SET_USERNAME:
return { ...state, username: action.payload }
default:
return state;
}
}
Login.js:
import React, {Component} from 'react';
import axios from 'axios';
// import Loader from 'react-loader-spinner';
import {Link, Route, Redirect} from 'react-router-dom';
import { connect } from 'react-redux';
import {setUsername} from './actions'
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import './Login.css';
import Home from '../Home/Home'
class Login extends Component {
state = {
email: null,
password: null,
status: null,
name: null
}
submitHandler = (event) => {
event.preventDefault();
console.log(this.state);
axios.get("http://localhost:5000/login/" + this.state.email + "/" + this.state.password).then((res) => {
this.setState({status: res.status, name: res.data.name});
this.props.setUsername(res.data.name) // Here you set the username in your redux store
console.log(this.state);
});
}
changeHandler = (event) => {
event.preventDefault();
const {name, value} = event.target;
this.setState({[name]: value});
}
render() {
const home = <Home/>
return (<div className="wrapper">
<div className="form-wrapper">
<h1>Login</h1>
<form onSubmit={this.submitHandler} noValidate>
<div className="email">
<label htmlFor="email">Email</label>
<input type="text" placeholder="Email" name="email" noValidate onChange={this.changeHandler}/>
</div>
<div className="password">
<label htmlFor="password">Password</label>
<input type="password" placeholder="Password" name="password" noValidate onChange={this.changeHandler}/>
</div>
<div className="login">
<button type="submit">Login</button>
</div>
<div>
{((this.state.status) && this.state.status === 200) ? <Redirect to="/home"/> : null}
</div>
</form>
</div>
</div>);
}
}
export function mapDispatchToProps(dispatch) {
return {
setUsername: username => dispatch(setUsername(username)),
};
}
const withConnect = connect(
null,
mapDispatchToProps,
);
export default withConnect(Login);
Home.js:
import React, {Component} from 'react';
import { connect } from 'react-redux';
class Home extends Component{
render(){
const {username} = this.props;
return(<h1>`Welcome ${username}`</h1>);
}
}
function mapStateToProps(state) {
const { username } = state.user;
return { username };
}
const withConnect = connect(mapStateToProps);
export default withConnect(Home);
import Cookies from 'universal-cookie';
const cookies = new Cookies();
cookies.set('username', username);
实际上,可能还有其他多种解决方案,但这是我想到的事情。希望对您有帮助!