如何在反应数据表中可视化我从 firestore 获得的用户数组？

Question

我的问题是将显示在控制台上的数组获取到视图中。我从 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]

所以我的问题是如何让构造函数获取这个用户数组并在页面的数据表中可视化他们？

Answer 1

在 React 中，.map 方法用于遍历对象及其属性。

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 item中。

查看此 React 文档页面。 https://reactjs.org/docs/lists-and-keys.html

如何在反应数据表中可视化我从 firestore 获得的用户数组？

How to visualize array of users iwhich i get from firestore n react datable?

reactjs

redux-firestore