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

Question

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

Я новичок в реакции, надеюсь, кто-нибудь может мне помочь. Большое спасибо.

Это мой логин. 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 будет также позвоните, чтобы получить данные.

Это домашняя страница. 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 данных пользователя

Answer 1

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

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

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

Answer 2

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

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

И на дочернем этапе вы Я получу к нему доступ через this.props.location.state.loginEmail

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

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