Question

我应用if else语句根据 firestore准备好并且用户已登录来显示不同的内容，但是 firebase.auth.uid 回来时未定义即使它正确地挂在了商店上，我也卡在了装货区。

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

在撰写中切换HOC的顺序可以解决此问题！！！！坦白说，我暂时不明白为什么...但是，如果您遇到这个问题，希望对您有所帮助。您的代码应如下所示：

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

在ReactJs中使用条件进行渲染

1 个答案: