Question

我正在使用Firebase创建登录页面。一旦用户登录，“auth”，firebase就会返回一个“user”变量，我用它来告诉我是否将“loggedIn”的组件状态设置为True或False。

auth函数返回正确的“loggedin”和“loggedout”console.log消息。但是当它到达setState时，我不确定是否会发生任何事情。当我重新渲染时，我最初创建的loggedIn状态（应该是True of False）是“未定义”，这让我感到困惑。

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）未定义值中的更新状态

1 个答案: