使用 mapStateToProps 的异步 firestore 查询

Question

我想使用从 firestore 收到的一些数据来构建测验。不幸的是我可以 console.log 数组，但是如果我使用 .length 它是未定义的。

此问题是由某些生命周期或异步问题引起的吗？

提前致谢！

import React, { Component } from 'react';
import { connect } from 'react-redux';

class LernenContainer extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            data: []
         }
    }

render() {    
     return ( 
            <div className="lernenContainer">
                LernenContainer
                {
                    console.log(this.props.firestoreData),
                    // prints array correctly

                    console.log(this.props.firestoreData.length)
                    // is undefined

                }
            </div>
         );
    }
}


const mapStateToProps = state => {
    return {
      firestoreData: state.firestoreData
    };
};

const mapDispatchToProps = dispatch => {
    return {
      // todo Achievements
    };
};

export default connect(mapStateToProps, mapDispatchToProps) (LernenContainer);

console.log(this.props.firestoreData):

Answer 1

试试下面的代码

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types'

class LernenContainer extends Component {
    constructor(props) {
        super(props);
    }
 static propTypes = {
    firestoreData: PropTypes.object.isRequired
  }
     render() { 

    const { firestoreData } = this.props
    console.log(firestoreData);
    console.log(firestoreData.length);


         return ( 
                <div className="lernenContainer">
                 </div>
             );
        }
}

    const mapStateToProps = (state) => ({
      firestoreData: state.firestoreData
    })
    const mapDispatchToProps = (dispatch) => ({
    })

  export default connect(mapStateToProps,mapDispatchToProps)(LernenContainer);

使用 mapStateToProps 的异步 firestore 查询

asynchron firestore query with mapStateToProps

asynchronous

reactjs

redux

google-cloud-firestore

react-props