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

Question

In this react component, I want to render the data to the screen when the 'Display' button is clicked by the user, but the button has to be pressed twice for the data to display. Any Suggestions?

constructor(props) {
    super(props);

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

}

Here's my displayData function:

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

And my render() just maps each person in the state with their properties:

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>

    );
}

Answer 1

Try this, hope this will work

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 : []
        });
    });
}

Answer 2

dbRef.on is asynchronous code, move the this.setState code inside the callback of dbRef.on .

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

The issue with your original code was execution of this.setState before completion of async dbRef.on