问题
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
?
回答1:
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.
回答2:
change this
this.props.history.push(
'/Taskactive',
{
role_id : this.userFormat,
userName : this.userName
}
);
to this:
this.props.history.push({
pathname: '/Taskactive',
appState: {
role_id : this.userFormat,
userName : this.userName
}
});
And inside the component which you are rendering for path /Taskactive, you can access the values as this.props.location.appState.role_id or this.props.location.appState.userName You can also change the name of Object(which I have kept as state) to your wish.
Hope this helps.
回答3:
if its a component rendered with react-router, the stuff passed are inside component props.
console.log(this.props.match.params)
from what I see, your router configuration is wrong. Login should be a child of <Router>
, and shouldn't container router at all.
Example config:
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route path="/login" component={Login} />
<Route path="/signup" component={Signup} />
<Route path="/restore-password" component={RestorePass} />
<Route path="/forgot-password" component={ForgotPass} />
</Switch>
</Router>
来源:https://stackoverflow.com/questions/54591359/react-reading-data-passed-as-parameter-in-history-push