reactjs - 如何可视化我从 firestore n react datable 获得的用户数组?
问题描述
我的问题是将控制台上显示的数组获取到视图中。我从 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]
所以我的问题是如何让构造函数获取这个用户数组并在页面的数据表中可视化它们?
解决方案
在反应中 .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
推荐阅读
- php - 如何使用 PHP 将 terraform 输出导出到日志文件?
- firebase - 颤振中的forEach后无法刷新状态
- date - Pine 脚本:如何找到 X 天前的价格
- python - 在 Pandas 中并行化 for 循环
- php - PHP/MYSQL crypt salt/hash 密码中的问题
- php - Laravel 8:找不到类'App\Http\Controllers\Admin\Rule'
- python - Python lambda多个时间段
- python - 在 python 中关闭服务器后,如何让客户端套接字继续侦听服务器?
- angular - 从 Angular 前端接收请求时,Spring Boot 应用程序中的某些端点无法正常工作
- reactjs - 最小化大型列表 React 组件树中不必要的重新渲染