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

Question

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

应用程序.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);

标签： javascriptreactjsfirebasereact-routerfirebase-authentication

Answer 1

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

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