时间戳

首页 > 解决方案 > 在 ReactJs 中使用条件渲染

javascript - 在 ReactJs 中使用条件渲染

问题描述

我应用 if else 语句来根据firestore 是否已准备好并且用户已登录来显示不同的内容，但是即使firebase.auth.uid已正确连接到商店，它也会返回未定义，并且我被困在加载块.

仪表板.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 都填充了数据：

在此处输入图像描述

我认为这是组件生命周期问题，其中，此仪表板组件在 store 具有值之前加载，但我认为一旦填充它应该呈现 boardlist 组件。

标签： javascriptreactjsfirebase

解决方案

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

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

推荐阅读