从Firebase文档读取阵列

of1yzvn4  于 2022-11-25  发布在  其他
关注(0)|答案(1)|浏览(86)

我有一个URL数组存储在一个文档中,我想读取并显示为单独的卡片。我得到的只是整个数组的返回,我没有正确Map它,我不知道我哪里出错了。
目前,它显示“https://website1.com,https://website2.com“。我希望它是单独的项目。

const getInternalLinks = async () => {
      try {
        const query = await db
          .collection("internallinks")
          .get()
          .then((snapshot) => {
            const tempData = [];
            snapshot.forEach((doc) => {
              const data = doc.data();
              tempData.push(data);
            });
            setInternalLinks(tempData);
          });
      } catch (err) {
        console.error(err);
    };
  };

useEffect(() => {
    getInternalLinks()
},[])

return (
  {internalLinks.map((doc, index) => {
    <Card>
      <p>{doc.urls.urls}</p>
    </Card>
  }))
);

Firebase集合结构

ddrv8njm

ddrv8njm1#

尝试将其直接添加到状态:

const [internalLinks, setInternalLinks] = useState([]);

const getInternalLinks = async () => {
      try {
        const query = await db
          .collection("internallinks")
          .get()
          .then((snapshot) => {
            
            snapshot.forEach((doc) => {
              const data = doc.data();
              setInternalLinks([ ...internalLinks, data ]);
            });
            
          });
      } catch (err) {
        console.error(err);
    };
  };

相关问题