Состояние обновления в реакторе (Firebase) Неопределенное значение

Question

Я создаю страницу входа с помощью Firebase. Как только пользователь входит в систему, «auth», firebase возвращает «пользовательскую» переменную, которую я использую, чтобы сообщить мне, нужно ли установить состояние компонента «loggedIn» равным True или False.

Функции auth возвращают правильные сообщения «loggedin» и «loggedout» console.log. Однако, когда он попадает в setState, я не уверен, что что-то произойдет. Когда я перерисовываю, состояние loggedIn, которое я изначально создал (которое должно быть либо True of 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} вместо этого.