Как визуализировать массив пользователей, которых я получаю из магазина и реагирую на данные? - PullRequest
Новая
       28

Как визуализировать массив пользователей, которых я получаю из магазина и реагирую на данные?

0 голосов
/ 12 марта 2020

Моя проблема состоит в том, чтобы получить массив, который отображается на консоли в представлении. Мой метод получения пользовательских документов из коллекции в firestore: 

    var UserData= [];
    componentDidMount() {
        const firestore = getFirestore();
        firestore.collection("users").get().then(data => {

          data.forEach(doc => {

            // console.log( "User",doc.data());
            UserData.push(doc.data());   


          });
          console.log("User:", UserData); 
        });


render() {
  return (

     <div>
        <button onClick={this.onLoad}>Get specific user data</button>
        <button onClick={this.onLoad1}>Get all user data</button>
     </div>

  );
}
}
export default compose()(AdminPanel);

Когда страница открывается в консоли, это: [! [Введите описание изображения здесь] [1]] [1]

Итак, мой вопрос: как заставить конструктор получить этот массив пользователей и визуализировать их в виде данных на странице?

1 Ответ

2 голосов
/ 12 марта 2020

В реагирует. Карта метод используется для перебора объектов и их свойств. 

return (
   <div>
    <button onClick={this.onLoad}>Get specific user data</button>
    <button onClick={this.onLoad1}>Get all user data</button>
    <table>
        <tbody>
            {UserData.map((user) => {
                           return (
                            <tr key={Math.random()>
                               <td>{user.city}</td>
                               <td>{user.email}</td>
                               <td>{user.firstName}</td>
                               <td>{user.initials}</td>
                               <td>{user.lastName}</td>
                            </tr>
                             )
                           }
                         }
      </tbody>
    </table>
   </div>
  );

Он будет перебирать все объекты в UserData один за другим и отображать их свойства в элементе tr.

Проверьте эту страницу документации React. https://reactjs.org/docs/lists-and-keys.html

...