Question

这可能是一个非常简单的修复程序，但是我是一个React新手，我不太清楚。我有一个SignIn组件，可以跟踪用户登录时的状态。我想将此状态传递给Dashboard组件，以显示一些用户信息。

SignIn.js：

import React, { Component } from 'react'
import firebase from '../config/firebaseConfig'
import { Redirect } from 'react-router-dom'

import GoogleLoginButton from './GoogleLoginButton'

class SignIn extends Component {
  state = {
    email: '',
    password: '',
    user: null
  }

  handleChange = (e) => {
    this.setState({
      [e.target.id]: e.target.value
    })
  }

  signIn = (e) => {
    e.preventDefault()
    firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
      .then(user => {
        this.setState({
          user
        })
      })
      .catch(err => {
        console.log(err)
      })
  }

  signUp = () => {
    this.props.history.push('/signup')
  }

  render() {
    if (this.state.user) return <Redirect to='/' />
    return (
      <div className="container">
        <div>
          <form id="signIn">
            <div className="input-field">
              <label htmlFor="email">Email</label>
              <input type="email" id="email" onChange={this.handleChange} />
            </div>
            <div className="input-field">
              <label htmlFor="password">Password</label>
              <input type="password" id="password" onChange={this.handleChange} />
            </div>
            <div className="input-field">
              <button className="btn blue left" onClick={this.signIn}>Sign In</button>
            </div>
          </form>
          <div>
            <button className="btn blue right" onClick={this.signUp}>Sign Up</button>
          </div>
        </div>
        <br/><br/><br/>
        <div className="center">
          <GoogleLoginButton />
        </div>
      </div>
    )
  }
}

export default SignIn

Dashboard.js：

import React, { Component } from 'react'

import SignOutButton from './SignOutButton'

class Dashboard extends Component {
  render() {
    return (
      <div className="container center">
        <div>
          <SignOutButton />
        </div>
      </div>
    )
  }
}

export default Dashboard

将登录状态传递到仪表板组件的最佳方法是什么？

Answer 1

要使用当前用户，您需要保持状态以在整个应用程序中使用。

要使用的选项

1-上下文api docs

2- Redux docs

3- localStorage

Answer 2

赞：

<Redirect to={{
      pathname: '/',
      state: { id: 1 }
   }}
/>

从仪表板访问：

this.props.location.state

您还可以通过SignIN中的状态传递任何数据

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

API DOC

Answer 3

您也可以这样做：

this.props.history.push("/", { response: YOUR_DATA }) FROM signin

并在仪表板中进行访问，如：

const state = this.props.location.state

Answer 4

我建议这样做的三种方式。

父母道具

为此不需要redux和上下文

用父组件包装登录表单，并将函数作为道具发送到loginForm组件

<LoginForm setUser={user => this.setState({user})}/>

并在其他组件（例如 Dashboard

）的父组件中使用此状态

上下文：

可能是最好的方法
Redux：

如果数据太大，需要跨多个组件进行访问

Answer 5

您可以使用react router在不同路由之间传递数据，如下所示。

this.props.router.push({
  pathname: '/newPage',
  state: {
    newValue: 123
  }
})

或者其他方式使用cookie或本地存储

import Cookies from 'universal-cookie';
const cookies = new Cookies();

export const SESSION_USER_NAME = 'SESSION_USER_NAME';
cookies.set(SESSION_USER_NAME, userName);

and to get value from cookie 

cookies.get(SESSION_USER_NAME),

在React中组件之间传递状态

5 个答案: