如何在身份验证期间更改 this.state 状态？ Firebase + 反应路由器答案

【问题标题】：How to change this.state status during authentication? Firebase + React-Router如何在身份验证期间更改 this.state 状态？ Firebase + 反应路由器
【发布时间】：2019-06-01 16:20:26
【问题描述】：

我使用 react-router 和 Firebase 进行身份验证。对于此函数，来自文件 SignIn 的 onButtonClick 必须将 App.js 中的状态更改为 true。这个怎么做？或许除了我的想法还有其他方法？

App.js：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 ....
import firebase from './firebase/firebase.js';

class App extends Component {

state = {
      signedInStatus : false
};

render(){
  const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={(props) => (
        this.state.signedInStatus
        ? <Component {...props} />
        : <Redirect to='/signIn' />
    )} />
  )
  return(
    <div>
      <Header signedInStatus={this.state.signedInStatus} />
    <Router>
    <Switch>
        <Route exact path="/" component={SignIn}/>
        <Route path="/signIn" component={SignIn}/>
        <Route path="/register" component={Register} />
        <PrivateRoute path="/home" component={Home} />
    </Switch>
    </Router>
      </div>
    );
  }
}

export default App;

第二个文件确保输入信息以进入用户柜。登录.js：

    import...
    class SignIn extends Component {
    state = {
          email: '',
          password: '',
    };

    onButtonClick = (event) =>{
      event.preventDefault();
      firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
           .then((user) => {
             this.props.history.push('/home')
             console.log("ok")  /// here i want add something to change 
           })                   /// this.state.signedIn for true in App
           .catch((error) => {
            console.log(error);
            alert(error);
          });
    }

    onChangeInputEmail = (event) => {
      this.setState({email: event.target.value})
    };

    onChangeInputPassword = (event) => {
      this.setState({password: event.target.value})
    };

    render(){
      return (
            ...
      )
    };

    export default withRouter(SignIn);

【问题讨论】：

标签： javascript reactjs firebase react-router firebase-authentication

【解决方案1】：

您需要定义一个方法来更新 App.js 的状态，然后您可以将 props 传递给组件，如下所示

<Route
  path='/signIn'
  render={(props) => <SignIn {...props} changeSignedInStatus={this.changeSignedInStatus} />}
/>

【讨论】：

欢迎我的朋友，乐于助人