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

Как указано выше, после входа в систему мне нужно передать электронную почту пользователя на следующую страницу (домашнюю страницу), чтобы пользовательские данные отображались автоматически, API-интерфейс сервера пользовательской информации получит письмо от внешнего интерфейса. Код, как показано ниже:

Я новичок в реакции, надеюсь, кто-нибудь может направить меня к этому. Великий Ценю.

Это мой login.js

import React, { Component }from 'react'
import {PostData} from '../../services/PostData'
import {Redirect} from 'react-router-dom'
import './Login.css'

class Login extends Component {

constructor (props){
  super(props);
  this.state ={
    loginEmail: '',
    loginPassword: '',
    redirect: false
  }
  this.login = this.login.bind(this);
  this.onChange = this.onChange.bind(this);
}

login(){
  if(this.state.loginEmail && this.state.loginPassword){
    PostData('api/users/login', this.state).then ((result) => {
      let responseJSON = result;
      console.log(responseJSON)
      if(responseJSON.user){
        sessionStorage.setItem('user', responseJSON);
        // console.log("Home Page")
        this.setState({redirect: true});
      }else{
        console.log("Login Error")
        alert("wrong user credential")
      }
    });
  }
}

onChange(e){
  this.setState({[e.target.name]: e.target.value});
}

  render(){

    if(this.state.redirect){
      return (<Redirect to ={'/home'}/>)
    }
    if(sessionStorage.getItem("user")){
      return (<Redirect to ={'/home'}/>)
    }

    return (
      <div className="row">
        <div className="column bodyPart">
          <h3>Login</h3>
            <label>Email</label>
            <input type="text" name="loginEmail" placeholder= "email" onChange={this.onChange}/>
            <label>Password</label>
            <input type="password" name="loginPassword" placeholder="password" onChange={this.onChange}/>
            <input type="submit" value="Login" className="button" onClick={this.login}/>
            <a href="/SignUp">Registration</a>
        </div>

      </div>
    );
  }
}

export default Login;

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

Это homepage.js

import React, { Component }from 'react'
import {Redirect} from 'react-router-dom'
import './Home.css'

class Home extends Component {

constructor(props){
  super(props);
  this.state ={
    redirect: false
  }
  this.logout = this.logout.bind(this);
}

componentWillMount(){
  if(sessionStorage.getItem("user")){
    console.log("Call User Feed");
  }else{
    this.setState({redirect: true});
  }
}

logout(){
  sessionStorage.setItem("user", '');
  sessionStorage.clear();
  this.setState({redirect: true});
}

  render(){

    if(this.state.redirect){
      return (<Redirect to ={'/login'}/>)
    }

    return (
      <div className="callout primary" id="Home">
        <div className="row column">
          <h1> Hi, Home </h1>
          <button type='button' className="button" onClick={this.logout}>logout</button>
        </div>
      </div>
    );
  }
}

export default Home;

API пользовательской детализации введите описание изображения здесь

Всего 2 ответа


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

Лично я бы использовал метод приведения. Вначале это немного сложно, но если ваше приложение становится больше, легче перемещать данные через ваше приложение.

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


Если вы хотите сохранить пользователя в состоянии вашего компонента Login, вы сможете передать его компоненту Home в качестве реквизита с помощью Redirect:

<Redirect to={{
    pathname: '/home',
    state: { loginEmail : this.state.loginEmail }}}/>

И у ребенка, вы получите к нему доступ с помощью this.props.location.state.loginEmail

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

В то же время, если вы хотите провести дальнейшее расследование о том, как / зачем передавать информацию с react-router я бы предложил начать здесь !


Есть идеи?

10000