使用ReactJs中的条件进行渲染

Question

我应用if else语句来显示基于的不同东西--如果已经准备好了，并且用户已经登录到中，但是即使它被正确地连接到存储，它仍然是未定义的，而且我被困在加载块中。

Dashboard.js：

       ...
        componentDidMount() {
    console.log("our props", this.props.firebase.auth.uid)
  }

        render() {
            const { fireStore, firebase } = this.props;


            if(fireStore && firebase.auth.uid){
            return (
              <div className="container">
                <div className="row">
                  <BoardList boards={fireStore} />
                </div>
              </div>
            )} else {
              return(
                <div style={{ display: 'flex',flex:1 ,flexDirection: "column", justifyContent: 'center', alignItems: 'center',}}>

                  <SelfBuildingSquareSpinner color={Color.bgColor} style={{marginTop: '5em'}} />
                  <div style={{textAlign:"center", marginTop: '5em'}}>Welcome to Scrum Board</div>
                </div>
              )
            }
          } 
    const mapStateToProps = state => {
      console.log("our state from dashboard ",state);
      return {
        scrumBoard: state.scrumBoard,
        fireStore: state.fireStore.ordered.scrumboards,
        firebase: state.firebase,
        users: state.users
      };
    };

    const mapDispatchToProps = (dispatch) => {
      return {
        fetchData : () => dispatch(fetchData()),
      }
    }

    export default compose(
      connect(
        mapStateToProps,
        mapDispatchToProps
      ),
      firestoreConnect([{ collection: "scrumboards" },{collection: "users"}])
    )(Dashboard);

this.props.firebase.auth.uid是未定义的，我被困在第二个块中。&&我的控制台显示，firebase和firestore都填充了数据：

​

​

我认为这是组件生命周期问题，在这个问题上，这个仪表板组件是在商店有值之前加载的，但是我认为一旦它被填充，就应该呈现boardlist组件。

Answer 1

在作文中切换顺序解决了这个问题！坦白说我不明白为什么现在..。但如果你遇到这个问题，我希望这会有所帮助。您的代码应该是这样的：

...
export default compose(
      firestoreConnect([{ collection: "scrumboards" },{collection: "users"}]),
      connect(
        mapStateToProps,
        mapDispatchToProps
      )
    )(Dashboard);