reactjs - 如何可视化我从 firestore n react datable 获得的用户数组？

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

在反应中 .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