Асинхронный запрос FireStore с mapStateToProps - PullRequest
Новая
       17

Асинхронный запрос FireStore с mapStateToProps

0 голосов
/ 20 сентября 2019

Я хотел бы использовать некоторые данные, полученные из пожарного магазина, для создания теста.К сожалению, я могу 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):

console.log

1 Ответ

2 голосов
/ 20 сентября 2019

Попробуйте код ниже 

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);
...