Реакция: чтение данных, переданных как параметр в history.push

Question

Я новичок, чтобы реагировать, и я пытаюсь отправить некоторые данные в качестве параметра в history.push.

В основном я вызываю метод по нажатию кнопки и внутри метода, который я вызываю API.Если я получаю ответ об успешном выполнении, я перенаправляю на другую страницу, и мне также необходимо передать некоторые данные.

Ниже приведен мой код для этого:

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 = "";
}

, так что до сих пор все в порядке, нотеперь мне нужно прочитать переданные данные, например role_id и userName на следующей странице, т.е. Taskactive .Так как же мы можем прочитать эти данные в Taskactive.jsx?

Answer 1

измените это

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

на следующее:

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

А внутри компонента, который вы рендерите для пути / Taskactive, вы можете получить доступ к значениям как this.props.location.appState.role_id или this.props.location.appState.userName Вы также можете изменить имя объекта (которое я сохранил как состояние) по своему желанию.

Надеюсь, это поможет.

Answer 2

Хорошо, после 4 дней борьбы и подергивания ответов Луна и JupiterAmy, вот что сработало для меня:

внутри Login.jsx

this.props.history.push({
          pathname : '/Taskactive',
          state :{
          role_id : responseJson.userFormat,
          userName : this.userName,
          userid: this.refs.usrname.value
          }
          } 
        );

и Taskactive.jsx

this.props.location.state.role_id

Надеюсь, это может кому-нибудь помочь в будущем.

Answer 3

если это компонент, отображаемый с реакции-маршрутизатором, передаваемый материал находится внутри подпорок компонента.

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

Исходя из того, что я вижу, конфигурация вашего маршрутизатора неверна.Логин должен быть дочерним по отношению к <Router> и вообще не должен быть маршрутизатором контейнера.

Пример конфигурации:

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