Как вывести список пользователей из firestore и отобразить его в виде таблицы на веб-странице с помощью реаги js?

Question

При нажатии кнопки «Просмотр пользователя» я пытаюсь получить сведения о пользователе из Firestore и отобразить их в виде таблицы на веб-странице. Используя console.log (), я могу просматривать данные в консоли. Я проверил некоторые ссылки о том, как отображать эти данные в таблице, но не помогло. Пожалуйста, помогите, ниже приведен код, который я использовал.

Ниже приведены поля (те же соглашения об именах, некоторые с пробелами) в моей коллекции пользователей;

Email: "...."
Name: "...."
Phone number: "...."
Vehicle Number: "...."

Home. js

<code>import React, { Component } from 'react';
import firebase from '../config/Firebase';

class Home extends Component {

constructor(props) {
    super(props);
    this.state = {
        users: [],
        userId: ''
    };
}


logout = () => {
    firebase.auth().signOut();
}

viewUser = () => {
    const db = firebase.firestore();
    db.settings({ timestampsInSnapshots: true });
    db.collection('Users').get().then((snapshot) => {
        snapshot.docs.forEach(doc => {
            if (doc.exists) {
                // let user = doc.data();
                // this.setState({ user: user});
                // console.log("user state updated: ",user)
                // console.log("user name: ",user);
                this.setState({
                    users: doc.data(),
                    userId: doc.id,
                    isLoading: false
                })
            } else {
                // this.setState({user: null});
                console.log("No data");
            }

        })
    })
    console.log('item clicked');
}

viewFeedback = () => {
    const db = firebase.firestore();
    db.settings({ timestampsInSnapshots: true });
    db.collection('Feedback').get().then((snapshot) => {
        snapshot.docs.forEach(doc => {
            console.log(doc.data())
        })
    })
    console.log('feedback item clicked');
    // this.render() {  
    //     return (
    //         <div>

    //         </div>
    //     )
    // }
}
render() {
    // let userUI = this.state.user ? <span>No User data</span> : <pre>{JSON.stringify(this.state.user)}

; пусть userUI = this.state.user? Нет данных пользователя :

Идентификатор пользователя	Электронная почта	Имя	Номер телефона	Автомобиль Номер
{this.state.userId}	{Users.Email}	{ Users.Name}	{Users.Phone number}

; return (

Диспетчер панели управления

Добавить парковку Просмотреть бронирование Просмотреть отзыв Просмотреть пользователя Выйти

Просмотр пользователей

{userUI}

)}} экспорт по умолчанию Home;

Спасибо.

Answer 1

Попробуйте это:

viewUser = () => {
    const db = firebase.firestore();
    db.settings({ timestampsInSnapshots: true });
    db.collection('Users').get().then((snapshot) => {
        snapshot.forEach(doc => {
            if (doc.exists) {
                // let user = doc.data();
                // this.setState({ user: user});
                // console.log("user state updated: ",user)
                // console.log("user name: ",user);
     this.setState(prevState => ({
  users: [...prevState.users,doc.data()]
}));
   console.log(this.state.users)


            } else {
                // this.setState({user: null});
                console.log("No data");
            }

        })
    })
    console.log('item clicked');
}