Javascript 反应组件未正确加载

我有一个简单的React应用程序连接到firebase firestore。到目前为止，它相当原始，它应该只加载

人的列表并显示他们

这是App.js和Person.js组件，它们非常简单，我遇到了一个问题，它没有加载
Person
组件，即使它从firebase正确获取信息。第一个
console.log（）
工作正常，但似乎从未调用过其余的。有人能发现这个问题吗？没有任何错误消息或警告，只是没有越界

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

//Person.jsx
从“React”导入React，{Component}；
导入“/Person.css”；
从“道具类型”导入道具类型；
类Person扩展组件{
建造师（道具）{
超级（道具）；
log（'来自个人构造函数：道具为：'+道具）；
this.fistName=props.firstName；
this.lastName=props.lastName；
this.personId=props.personId；
this.createdDate=props.createdDate；
}
渲染（道具）{
log（'from person renderer:props是：'+props）；
返回(
个人ID:{this.personId}
名字：{this.firstName}
姓氏：{this.lastName}

);
}
}
Person.propTypes={
名字：PropTypes.string，
lastName:PropTypes.string，
personId:PropTypes.string，
createdDate:PropTypes.string
};
出口违约人；

第二个文件：

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

//App.js
从“React”导入React，{Component}；
导入“/App.css”；
从“./人/人”导入人；
从“./CONFIG/CONFIG”导入{DB_CONFIG}；
从“firebase”导入firebase；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.addPerson=this.addPerson.bind（this）；
如果（！firebase.apps.length）{
firebase.initializeApp（DB_CONFIG）；
}
this.db=firebase.firestore（）；
常量设置={timestampsInSnapshots:true}；
此.db.settings（设置）；
此.state={
人：[]
};
}
组件willmount（）{
var allPeople=[]；
this.db.collection（'people'）.onSnapshot（函数（querySnapshot））{
querySnapshot.forEach（函数（doc）{
allPeople.push（doc.data（））；
});
});
这是我的国家({
人：所有人
});
console.log（所有人）；
}
addPerson（个人）{
//this.db.push（）.set（{firstName:person，lastName:person}）；
这个是.db
.集合（“人”）
.doc（person.personId）
.设置({
名字：person.firstName，
lastName:person.lastName
})
.然后（函数（）{
console.log（'已成功添加人员：'+人员.firstName）；
const allPeople=this.state.people；
var currentSnap=snap=>{
所有人，推({
personId:snap.key，
firstName:snap.val（）.firstName，
lastName:snap.val（）.lastName
});
这是我的国家({
人：所有人
});
};
})
.catch（函数（错误）{
console.error（'编写文档时出错'，错误）；
});
}
render（）{
返回(
例如资源：
{console.log（this.state.people）}
{this.state.people.map（person=>{
控制台日志（个人）；
返回(
);
})}
);
}
}
导出默认应用程序；
尝试添加一个名为isFetchComplete的状态变量，该变量在从firebase存储中提取数据时设置为true，否则为false。
然后在组件的呈现中执行
if（！isFetchComplete）{/*render..loading*/}否则{/*使用数据呈现组件*/

您案例中的问题很可能是渲染已完成，并且除非调用setState，否则不会重新渲染。
可能就像您在请求后立即调用setState一样，setState发生在请求完成之前，并且您没有向状态中添加新的人员，请尝试使用then并使用setState，但如果
this.state.people
未执行此操作填充我不会看到控制台日志被正确填充，对吗？`行
{console.log（this.state.people）}
工作正常并打印出人员列表