javascript - 如何在 React 中渲染数据(实时/firebase)
问题描述
我有这个使用 Vue 创建的数据库(实时/firebase),现在我想使用 React 检索数据。我可以在控制台中看到数据,但我无法渲染所有项目,只能渲染最后一个。这是我尝试过的:
const fetchDatabase = () => {
db.on("value", snapshot => {
snapshot.forEach(item => {
let data = item.val();
console.log(data);
setSusi(data);
});
});
};
我正在尝试像这样渲染它:
<ul>
{Object.entries(susi).map(([key, value]) => {
return (
<li>
{key}: {value}
</li>
);
})}
<hr />
</ul>
<button onClick={fetchDatabase}>pegar anamnese</button>
解决方案
这里的问题是您仅将last
项目设置为状态:
const fetchDatabase = () => {
db.on("value", snapshot => {
snapshot.forEach(item => {
let data = item.val();
console.log(data);
setSusi(data);
});
});
};
尝试这样的事情:
const fetchDatabase = () => {
const susis = [];
db.on("value", (snapshot) => {
snapshot.forEach((item) => {
let data = item.val();
console.log(data);
susis.push(data);
});
// here we set all of them
setSusi(susis);
});
};
推荐阅读
- node.js - Firebase 函数在尝试写入存储时抛出错误
- r - R中count.fields函数中的quote =“”是什么意思?
- api - 为什么在资源 ID 的开头使用首字母缩略词?
- css - 如何在 React 中取消单击表格单元格
- python - 为什么这个正则表达式不匹配完整的模式?
- progressive-web-apps - 有什么方法可以阻止用户在 Kiosk 设备中关闭 PWA 应用程序
- reactjs - 组件在反应中被渲染 6 次
- python - 如何在pyspark中将类型从_csv.reader转换为rdd
- sql - 如何计算所有记录并提取上次活动日期
- c++ - 具有格式错误的默认模板参数的未使用成员模板是否需要诊断?