Неправильно загружать компонент

Varda Elentári спросил: 12 мая 2018 в 04:30 в: javascript

У меня есть простое приложение React, подключенное к firebase firestore. Довольно примитивно до этого он должен загружать только список people и отображать их.

Вот компоненты App.js и Person.js, они очень простые, m имеет проблему, когда он не загружает компонент Person, даже если он правильно извлекает информацию из firebase. Первый console.log() работает отлично, но, похоже, остальные не вызываются. может ли кто-нибудь определить проблему? Нет никаких сообщений об ошибках или предупреждений, которые он просто не проходит через строку {this.state.people.map(person => ...

//Person.jsximport React, { Component } from 'react';
import './Person.css';
import PropTypes from 'prop-types';class Person extends Component {
    constructor(props) {
        super(props);
        console.log('from person constructor: props are:' + props);
        this.fistName = props.firstName;
        this.lastName = props.lastName;
        this.personId = props.personId;
        this.createdDate = props.createdDate;
    }    render(props) {
        console.log('from person renderer: props are:' + props);        return (
            <div className="person-wrapper">
                <p className="personId"> Person ID : {this.personId}</p>
                <p className="firstName"> First Name : {this.firstName}</p>
                <p className="lastName"> Last Name : {this.lastName}</p>
            </div>
        );
    }
}Person.propTypes = {
    firstName: PropTypes.string,
    lastName: PropTypes.string,
    personId: PropTypes.string,
    createdDate: PropTypes.string
};export default Person;

второй файл:

//App.js
import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';
import { DB_CONFIG } from './Config/config';
import firebase from 'firebase';class App extends Component {
    constructor(props) {
        super(props);        this.addPerson = this.addPerson.bind(this);
        if (!firebase.apps.length) {
            firebase.initializeApp(DB_CONFIG);
        }
        this.db = firebase.firestore();
        const settings = { timestampsInSnapshots: true };
        this.db.settings(settings);
        this.state = {
            people: []
        };
    }    componentWillMount() {
        var allPeople = [];
        this.db.collection('people').onSnapshot(function(querySnapshot) {
            querySnapshot.forEach(function(doc) {
                allPeople.push(doc.data());
            });
        });
        this.setState({
            people: allPeople
        });        console.log(allPeople);
    }    addPerson(person) {
        //this.db.push().set({firstName:person,lastName:person});
        this.db
            .collection('people')
            .doc(person.personId)
            .set({
                firstName: person.firstName,
                lastName: person.lastName
            })
            .then(function() {
                console.log('Successfully added person: ' + person.firstName);
                const allPeople = this.state.people;                var currentSnap = snap => {
                    allPeople.push({
                        personId: snap.key,
                        firstName: snap.val().firstName,
                        lastName: snap.val().lastName
                    });
                    this.setState({
                        people: allPeople
                    });
                };
            })
            .catch(function(error) {
                console.error('Error writing document :', error);
            });
    }    render() {
        return (
            <div className="peopleWrapper">
                <div className="peopleHeader">
                    <h1>EG Resources:</h1>
                </div>
                <div className="peopleBody">
                    {console.log(this.state.people)}
                    {this.state.people.map(person => {
                        console.log(person);
                        return (
                            <Person
                                firstName={person.firstName}
                                lastName={person.lastName}
                                key={person.personId}                            />
                        );
                    })}
                </div>
                <div className="PeopleFooter" />
            </div>
        );
    }
}export default App;

1 ответ

Matt Pengelly ответил: 12 мая 2018 в 05:54

Попробуйте добавить переменную состояния, называемую isFetchComplete, которая получает значение true, когда данные выполняются из хранилища firebase, а в противном случае - false.then внутри вашего рендеринга компонента do if(!isFetchComplete) { /* render ..loading */ } else { /* render the component with the data */

Проблема в вашем случае, вероятно, что рендер сделан и не будет повторно рендеринга, если не будет вызвана функция setState.