反应:读取作为history.push中的参数传递的数据
[英] React: reading data passed as parameter in history.push
本文介绍了反应:读取作为history.push中的参数传递的数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新来的，我试图在 history.push 中发送一些数据作为参数.
基本上，我在单击按钮时调用一个方法，在该方法中我调用了一个 api.如果我收到成功响应，我将重定向到其他页面，并且还需要传递一些数据.
下面是我的代码:
class 登录扩展组件 {构造函数(道具){超级(道具)；this.state = {输入名称:空，输入密码:空，重新编码:空，用户名:空，格式描述:空，用户格式:空，成功:假，responseJson:空，};}状态 = {输入名称:空，输入密码:空，重新编码:空，用户名:空，格式描述:空，用户格式:空，成功:假，responseJson : 空，}渲染=()=>{返回 (<路由器><div id="登录页面"><div className="back-image" style={{height:"100vh"}}><div className="容器"><form className="form-login" action="index.html"><h2 className="form-login-heading">现在登录</h2><div className="登录包装"><label>用户 ID</label><input type="text" ref="usrname" className="form-control" placeholder="User ID" autofocus/><br/><label>密码</label><input type="password" ref="password" className="form-control" placeholder="密码"/><br/><a className="btn btn-theme btn-block" onClick={this.login.bind(this)}><i className="fa fa-lock mr-10"/>登录</a><对话框引用={(组件)=>{ this.dialog = 组件 }}/>
</表单>
</路由器>);}登录 = (e) =>{e.preventDefault();获取('一些网址'，{方法:'POST'，正文:JSON.stringify({"userId": this.refs.usrname.value,密码":this.refs.password.value})}).then((响应) => response.json()).then((responseJson) => {控制台日志(`响应:`，responseJson)如果(responseJson.errorCode === '00'){this.setState({ rescode: responseJson.errorCode })this.setState({ 用户名: responseJson.userName })this.setState({ formatDesc: responseJson.formatDesc });this.setState({userFormat : responseJson.userFormat});this.setState({成功:真});this.setState({responseJson: responseJson});this.props.history.push('/任务活跃',{role_id : this.userFormat,用户名:this.userName});}别的 {alert("登录时出错.." + responseJson.errorMsg);this.refs.usrname.value = "";this.refs.password.value = "";}}).catch((错误) => {控制台错误(错误)；});this.refs.usrname.value = "";this.refs.password.value = "";}
所以到目前为止一切都很好，但现在我需要读取下一页中传递的数据，即role_id和userName，即Taskactive.那么我们如何在 Taskactive.jsx 中读取这些数据呢?
解决方案
好吧，在挣扎了 4 天并围绕 Luna 和 JupiterAmy 给出的答案抽搐之后，以下是对我有用的方法:
在 Login.jsx
内
this.props.history.push({路径名:'/Taskactive',状态 :{role_id : responseJson.userFormat,用户名:this.userName，用户 ID:this.refs.usrname.value}});
和Taskactive.jsx
this.props.location.state.role_id
希望这可以在将来对某人有所帮助.
I am new to react and I am trying to send some data as parameter in history.push.
Basically I am calling a method on a button click and inside the method I am calling an api. If I get success response I redirect to other page and I need to pass some data as well.
Below is my code for that:
class Login extends Component {
constructor(props) {
super(props);
this.state = {
enteredName: null,
enteredPwd: null,
rescode: null,
userName: null,
formatDesc: null,
userFormat : null,
success: false,
responseJson : null,
};
}
state = {
enteredName: null,
enteredPwd: null,
rescode: null,
userName: null,
formatDesc: null,
userFormat : null,
success: false,
responseJson : null,
}
render=() =>{
return (
<Router>
<div id= "login-page">
<div className="back-image" style={{height:"100vh"}}>
<div className="container">
<form className="form-login" action="index.html">
<h2 className="form-login-heading">sign in now</h2>
<div className="login-wrap">
<label>User ID</label>
<input type="text" ref="usrname" className="form-control" placeholder="User ID" autofocus/>
<br/>
<label>Password</label>
<input type="password" ref = "password" className="form-control" placeholder="Password"/>
<br/>
<a className="btn btn-theme btn-block" onClick={this.login.bind(this)}><i className="fa fa-lock mr-10"/>SIGN IN</a>
<Dialog ref={(component) => { this.dialog = component }} />
</div>
</form>
</div>
</div>
</div>
</Router>
);
}
login = (e) => {
e.preventDefault();
fetch('some url', {
method: 'POST',
body: JSON.stringify({
"userId": this.refs.usrname.value,
"password": this.refs.password.value
})
})
.then((response) => response.json())
.then((responseJson) => {
console.log(`response: ` , responseJson)
if (responseJson.errorCode === '00') {
this.setState({ rescode: responseJson.errorCode })
this.setState({ userName: responseJson.userName })
this.setState({ formatDesc: responseJson.formatDesc });
this.setState({userFormat : responseJson.userFormat});
this.setState({success : true});
this.setState({responseJson: responseJson});
this.props.history.push(
'/Taskactive',
{
role_id : this.userFormat,
userName : this.userName
}
);
}
else {
alert("Error Logging in.." + responseJson.errorMsg);
this.refs.usrname.value = "";
this.refs.password.value = "";
}
})
.catch((error) => {
console.error(error);
});
this.refs.usrname.value = "";
this.refs.password.value = "";
}
so everything is fine till now,but now I need to read the data passed i.e. role_id and userName in the next page i.e. Taskactive. So how can we read those data in Taskactive.jsx ?
解决方案
Okay,after struggling for 4 days and twitching around the answers given by Luna and JupiterAmy, here is what worked for me:
inside the Login.jsx
this.props.history.push({
pathname : '/Taskactive',
state :{
role_id : responseJson.userFormat,
userName : this.userName,
userid: this.refs.usrname.value
}
}
);
and in Taskactive.jsx
this.props.location.state.role_id
Hope this could help somebody in future.
这篇关于反应:读取作为history.push中的参数传递的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
