web-dev-qa-db-fra.com

React: lecture des données passées en paramètre dans history.push

Je suis nouveau pour réagir et j'essaie d'envoyer des données comme paramètre dans history.Push.

Fondamentalement, j'appelle une méthode sur un clic de bouton et à l'intérieur de la méthode, j'appelle une API. Si je reçois une réponse positive, je redirige vers une autre page et je dois également transmettre certaines 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 serName dans la page suivante, c'est-à-dire Taskactive. Alors, comment pouvons-nous lire ces données dans Taskactive.jsx?

reactjsreact-routerreact-router-v4react-router-domreact-16
6
Chandrani Chatterjee

change ça

this.props.history.Push(
          '/Taskactive',
          {
            role_id : this.userFormat,
            userName : this.userName
          }
        );

pour ça:

this.props.history.Push({
          pathname: '/Taskactive',
          appState: {
            role_id : this.userFormat,
            userName : this.userName
          }
        });

Et à l'intérieur du composant que vous rendez pour path/Taskactive, vous pouvez accéder aux valeurs comme this.props.location.appState.role_id ou this.props.location.appState.userName Vous pouvez également changer le nom de l'objet (que j'ai gardé comme état) à votre souhait.

J'espère que cela t'aides.

1
JupiterAmy

si c'est un composant rendu avec react-router, les choses passées sont à l'intérieur des accessoires de composant.

console.log(this.props.match.params)

d'après ce que je vois, la configuration de votre routeur est incorrecte. La connexion doit être un enfant de <Router>, et ne devrait pas du tout router les conteneurs.

Exemple de configuration:

<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>
0
Luna