反应组件无法正确加载

Question

I have a simple React app hooked up to a firebase firestore. It's pretty primitive so far it should only load the list of people and display them.

Here's the App.js and a Person.js component, they're very simple, I'm having an issue where it's not loading the Person component even though it's fetching the information correctly from firebase. The first console.log() works fine, but it seems the rest are never called. can anyone spot the issue? There aren't any error messages or warnings it just doesn't go past the line
{this.state.people.map(person => ...

//Person.jsx

import 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;

the second file:

//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;

Answer 1

Try adding a state variable called isFetchComplete that gets set to true when the data is done being fetched from the firebase store and otherwise is false. then within your render of the component do if(!isFetchComplete) { /* render ..loading */ } else { /* render the component with the data */

The problem in your case is likely that the render is done, and wont re-render unless a setState is called.