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

Posted 2023-02-19

【中文标题】更新 React (Firebase) 中的状态未定义值

【英文标题】：Update State in React (Firebase) Undefined Value

【发布时间】：2017-05-08 16:05:49

【问题描述】：

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

auth 函数返回正确的“loggedin”和“loggedout”console.log 消息。但是，当它到达 setState 时，我不确定会发生什么。当我重新渲染时，我最初创建的登录状态（应该是 True 或 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>
    );
  

【参考方案1】：

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

this.setState(
  loggedIn: false
);

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

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