Je suis nouveau pour réagir et j'essaie d'envoyer des données en tant que paramètre dans history.push .
En gros, j'appelle une méthode sur un clic de bouton et dans la méthode que j'appelle une API. Si j'obtiens une réponse positive, je redirige vers une autre page et je dois également transmettre des données.
Voici mon code pour cela:
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 = "";
}
donc tout va bien jusqu'à présent, mais maintenant je dois lire les données transmises, c'est-à-dire role_id et userName sur la page suivante, c'est-à-dire Taskactive . Alors, comment pouvons-nous lire ces données dans Taskactive.jsx ?
3 Réponses :
si c'est un composant rendu avec react-router, les trucs passés sont à l'intérieur des accessoires du composant.
<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>
d'après ce que je vois, la configuration de votre routeur est erronée. La connexion doit être un enfant de
Exemple de configuration:
console.log(this.props.match.params)
p>
J'ai essayé de lire le role_id dans Taskactive.jsx comme this.props.role_id mais je deviens indéfini en réponse
@ChandraniChatterjee non, ce n'est pas this.props.role_id. c'est sous this.props.match.params. console.log cela, et vous verrez.
toujours indéfini dans la console
@ChandraniChatterjee est votre composant où votre journal de console est rendu par react-router? il ne doit pas être un composant enfant pour que cela fonctionne. qu'essayez-vous de vous connecter exactement? essayez de consigner exactement ce que j'ai écrit et vérifiez le contenu de celui-ci
Je suis indéfini dans le journal et Taskactive.jsx n'est pas un enfant de Login.jsx
@ChandraniChatterjee Je pense que je vois le problème. votre configuration est fausse. sinon cela fonctionne hors de la boîte. Vous avez un routeur dans la connexion et aucune route en dessous. Je vous suggère de reconfigurer react-router, mais correctement
changez ceci
this.props.history.push({
pathname: '/Taskactive',
appState: {
role_id : this.userFormat,
userName : this.userName
}
});
en ceci:
this.props.history.push(
'/Taskactive',
{
role_id : this.userFormat,
userName : this.userName
}
);
Et à l'intérieur du composant que vous rendez pour path / Taskactive, vous pouvez accéder les valeurs telles que this.props.location.appState.role_id ou this.props.location.appState.userName Vous pouvez également changer le nom de l’objet (que j’ai conservé comme état) selon votre souhait.
J'espère que cela vous aidera.
Salut Chandrani, Veuillez essayer maintenant, il y a eu une erreur de syntaxe. J'ai mis à jour ma réponse maintenant.
J'obtiens TypeError: impossible de lire la propriété 'role_id' de undefined lorsque j'essaie de lire dans Taskactive.jsx comme alert ("getroles called" + this.props.location.appState.role_id );
vérifiez dans votre outil de développement react si vous avez appState disponible comme emplacement prop à l'intérieur.
D'accord, après avoir lutté pendant 4 jours et hésité autour des réponses données par Luna et JupiterAmy, voici ce qui a fonctionné pour moi:
dans le Login.jsx retour
this.props.location.state.role_id
et dans Taskactive.jsx
this.props.history.push({
pathname :Â '/Taskactive',
state :{
role_id : responseJson.userFormat,
userName :Â this.userName,
userid: this.refs.usrname.value
}
}
);
J'espère que cela pourra aider quelqu'un à l'avenir.
p >