时间戳

首页 > 解决方案 > Map 方法不适用于基于 Firestore 的 Next 应用程序

reactjs - Map 方法不适用于基于 Firestore 的 Next 应用程序

问题描述

我正在尝试基于 Firebase 数据返回一个简单的 JSX 组件，但它似乎不起作用。我尝试只返回组件并且效果很好。但是，如果我尝试映射它，它就不起作用。服务器肯定会返回数据，因为我可以将其登录到控制台。我尝试在 Codesandbox 中设置代码，但设置不正确。任何帮助深表感谢。

这是我的 Github 链接：https ://github.com/servesh-chaturvedi/Chat-App-with-firebase

CodeSandBox 中的当前代码：https ://codesandbox.io/s/small-morning-clnrp?file=/components/Sidebar.js

{chatSnapshot?.docs.map((chat) => {
  <Chat key={chat.id} id={chat.id} users={chat.data().users} />
 })}

标签： reactjsfirebasegoogle-cloud-firestorenext.js

解决方案

当您使用箭头函数时，默认行为是返回箭头右侧的任何内容，例如：

const returnsHello = () => 'Hello'
returnsHello() //'Hello'

但是，当您想在代码块中使用箭头函数时，就像使用花括号一样，隐含的返回值将被删除，并且必须明确。假设您没有其他问题，这是您应该可以工作的代码编辑。

{chatSnapshot?.docs.map((chat) => {
 return <Chat key={chat.id} id={chat.id} users={chat.data().users} />
 })}

这将遍历数组的每个元素，并使用数组值返回一个包含 Chat 组件的新数组。

推荐阅读