Javascript 我必须单击显示按钮两次才能将数据呈现到屏幕上？

在这个react组件中，我想在用户单击“显示”按钮时将数据呈现到屏幕上，但必须按两次按钮才能显示数据。有什么建议吗？

constructor(props) {
    super(props);

    this.state = {
        people: [] // start with empty array of people
    }

}

下面是我的displayData函数：

displayData = () => {
    const db = fire.database(); // database instance
    const dbRef = db.ref(); // database reference
    var newPeopleArray = []; // new array to push everyone from database into

    dbRef.on('value', snapshot => {

        snapshot.forEach(childSnapshot => { // for every child in the data snapshot
            var key = childSnapshot.key; // in this case returns first name
            var childData = childSnapshot.val();

            var newPerson = { // create new person object to push into the array
                name: key,
                age: childData.Age,
                lastName: childData.LastName
            };

            // console.log(newPerson);
            newPeopleArray.push(newPerson);

        });

    });

    // set state to the new array of people from the database
     this.setState({ 
         people: newPeopleArray
     });
}

my render（）只是将状态中的每个人与其属性进行映射：

render() {     

    const stateToRender = this.state.people.map( person => // maps each person in the state to a row in the table
        <div key={person.name}>
            {person.name}
            {person.lastName}
            {p.age}
        </div>

    );

    return (
        <div className="container">

            <h1>Home Page</h1>
            <br />
            <button className="btn btn-danger" onClick={this.displayData}>Display</button>   
            {stateToRender}


        </div>

    );
}

render（）{
const stateToRender=this.state.people.map（person=>//将状态中的每个人映射到表中的一行
{person.name}
{person.lastName}
{p.age}
);
返回(
主页


展示
{stateToRender}
);
}

试试这个，希望能奏效

displayData = () => {
    const db = fire.database(); // database instance
    const dbRef = db.ref(); // database reference
    var newPeopleArray = []; // new array to push everyone from database into

    dbRef.on('value', snapshot => {
        newPeopleArray = snapshot.map(childSnapshot => { // for every child in the data snapshot
            var key = childSnapshot.key; // in this case returns first name
            var childData = childSnapshot.val();
            var newPerson = { // create new person object to push into the array
                name: key,
                age: childData.Age,
                lastName: childData.LastName
            };
            return newPerson;
        });
        // set state to the new array of people from the database
        this.setState({
            ...this.state,
            people: newPeopleArray ? newPeopleArray : []
        });
    });
}

---

dbRef.on

是异步代码，请将

this.setState

代码移到

dbRef.on

的回调中

// set state to the new array of people from the database
 this.setState({ 
     people: newPeopleArray
 });

---

原始代码的问题是在完成async

dbRef.on

移动this.setState（{people:newPeopleArray}）之前执行

this.setState

；在dbRef.on（'value'=>{}）中，同意@AntonioPangallo，

dbRef.on

返回一个在您的

SetState（{}）调用之前没有完成的承诺。@AntonioPangallo成功了。感谢大家的快速响应