如何在本机反应中从firebase获取对象答案

【问题标题】：How to get an object from firebase in react native如何在本机反应中从firebase获取对象
【发布时间】：2021-05-17 03:38:32
【问题描述】：

我正在尝试从 firebase 读取对象数据，但由于我使用下面的代码，因此发生了一些错误。

这是我从 firebase 读取数据的方法。

function getMenuData() {
    let newMenu = [];
    MENUref.onSnapshot(querySnapshot => {
        querySnapshot.forEach(doc => {
            const menu = {
                id: doc.id,
                Name: doc.data().name,
                desc: doc.data().desc,
                url: Images[doc.data().name],
                people: doc.data().people,
                type: doc.data().type,
                time: doc.data().time,
                ingre: doc.data().ingre,
                season: doc.data().season,
                like: doc.data().like,
            }
            newMenu.push(menu)
        });
        setMenu(newMenu)
        setDisplayOfData(newMenu)
        // console.log('food', Menu)
    });
}

然后弹出“Objects are not valid as a React child”。错误信息。经过我的一些研究表明它需要通过 map() 方法完成，但它可以在“菜单：{}”中执行吗？

我们的目标是从 firebase 读取对象数据并使其成为这样。 data structure

这是我的 firebase 数据结构。

或者一些可用的方法可以对这样的对象数据做同样的事情？非常感谢！

【问题讨论】：

需要更多信息，你能补充更多细节吗？
我在正文中添加了一些描述，谢谢
Objects are not valid as a React child. 当您尝试渲染对象时，通常会发生此错误。你能分享一下你实现的render 方法吗？旁注，但您可以在构建对象之前调用 doc.data() 一次。

标签： reactjs firebase react-native google-cloud-firestore

【解决方案1】：

在 JavaScript SDK 中，有一些称为 useCollectionData 的东西可以从 react-firebase-hooks/firestore 导入，然后您可以使用诸如 const [data] = useCollectionData(query); 之类的东西，其中查询可能是对您所指向的具有过滤功能的 firebase 集合的引用。 firestore.collection('your-collection').orderBy('createdAt)。这是处理 firebase 数据的官方方法，然后您可以简单地使用 .map(item => <Item data={item}>)

【讨论】：

【解决方案2】：

检查您的菜单如何呈现给View。

由于菜单是来自 firebase 的数据数组，要将其渲染到视图，您必须使用 map() js 方法，因为对象或数组无法转换为 React Child 元素。

例如;

{menu.map((item) => {
  return <Text>{item.Name}</Text>
})}

【讨论】：