reactjs - 从 Firebase React 组件返回 map()?
问题描述
我希望组件ItemsFromDB在我的Firebase Realtime Database中的“内容”引用下迭代对象的内容。但是我怎样才能让这个组件返回我想要map()
的函数,因为它在一个快照箭头函数中?
function ItemsFromDB () {
return (
let ref = firebase.database().ref('content')
ref.child(name).on('value', function (snapshot) {
snapshot.map((childSnapshot) =>
<h2>{childSnapshot.val().name}</h2>
)
})
)
}
谢谢!
解决方案
类似的东西
function ItemsFromDB () {
const [names, setNames] = React.useState(null);
React.useEffect(() => {
const ref = firebase.database().ref('content').child('name');
const callback = snapshot => (
setNames(snapshot.map(child => child.val().name))
);
ref.on('value', callback);
return () => {
ref.off('value', callback);
};
}, []);
if (!names) return null;
return (
<React.Fragment>
{names.map(name => <h2>{name}</h2>)}
</React.Fragment>
);
}
推荐阅读
- node.js - Strapi + Heroku 部署失败:npm ERR!代码 EINVALIDTAGNAME
- solr - 路径分隔符是否真的需要在过滤器查询中转义,而不是在 solrj 的构面前缀中?
- amazon-web-services - 如何查看 AWS Glue Spark UI
- javascript - 动态渲染 MapView Marker React Native
- php - 如何最有效地检查数千个值的数组中是否存在单个值?
- javascript - 如何自动将中间结构添加到嵌套对象(à la Python's defaultdict)?
- php - 使用 mysqldump 导出数据库时出现未捕获的错误
- react-native - 首先显示点击的配置文件然后在配置文件之间滑动反应原生
- php - WooCommerce 在扩展 WC_Stripe_Webhook_Handler 时遇到问题
- c# - 如何在正则表达式c#中只接受数字和加号(+)