在 React (Firebase) 未定义值中更新状态

Question

我正在使用 Firebase 创建登录页面。一旦用户登录，"auth"、firebase returns 一个 "user" 变量，我用它来让我知道是否设置 "loggedIn" 的组件状态是对还是错。

授权函数返回正确的 "loggedin" 和 "loggedout" console.log 消息。但是，当它到达 setState 时，我不确定会发生什么。当我重新渲染时，我最初创建的登录状态（应该是 True 或 False）是 "undefined"，这让我很困惑。

class Navigation extends React.Component {
  static propTypes = {
    className: PropTypes.string,
  };

  constructor(props) {
    super(props);
    this.state = {
      loggedIn: false
    }
  }

  componentDidMount() {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        console.log("USER LOGGED IN :) Nav.js")
        console.log(user.email)
        this.setState({
          loggedIn: true
        });
      } else {
        console.log("NOBODY'S HERE Nav.js")
        this.setState({
          loggedIn: false
        });
        // do not change state
      }
    }.bind(this));
  }

  render() {
    console.log("CUR STATE: ", this.state.isLoggedIn)
    return (
      <div className={cx(s.root, this.props.className)} role="navigation">
        <Navbar isLoggedIn={this.state.isLoggedIn}/>
      </div>
    );
  }
}

Answer 1

您向 NavBar-组件传递了错误的状态变量。您正在这样设置您的状态：

this.setState({
  loggedIn: false
});

但正试图在渲染函数中像这样使用它：isLoggedIn={this.state.isLoggedIn}

这应该是：isLoggedIn={this.state.loggedIn}。

在 React (Firebase) 未定义值中更新状态

Update State in React (Firebase) Undefined Value

authentication

setstate

firebase

reactjs

redux