【问题标题】:How to fetch and display data from documents in subcollection in react如何在反应中从子集合中的文档中获取和显示数据
【发布时间】:2021-01-24 12:52:58
【问题描述】:

我想以最简单的方式显示来自 firestore 的数据,因为我是 react 初学者。这是我的 Firestore 数据树。

collection-[documentsList [ subcolletcion [ documentsList [ data

【问题讨论】:

  • 你能展示你在哪里获取数据和渲染数据的代码吗?你在那里面临什么问题?你有哪个错误?
  • 这是我数据库的一棵大树,我只知道 react 的基础知识,我从父集合中获取文档的方式在我看来确实是最愚蠢的方式,但无论如何我还没有写获取数据的代码,我想知道如何获取数据,查看我的数据库树,我成功地在表中显示了我的父集合的文档现在我想转到文档中子集合中的文档中的数据(我成功获取)。 Ps:如果造成混淆,请见谅。

标签: reactjs firebase redux google-cloud-firestore


【解决方案1】:

要获取数据,您可以这样做:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
     const getData = async () => {         
       const result = await axios('https://route_to_backend.com/bla-bla'); 
       setData(result.data);
     }
     getData();
  }, []);

  return (
    <ul>
      {data && data.map(item => (
        <li key={item.id}>
          <div>{item.title}</div>
        </li>
      ))}
    </ul>
  );
}

export default App;

如果您提供一些从服务器接收到的对象示例,我可以编写代码来呈现它。

【讨论】:

  • 兄弟,我的数据看起来像这样:- [集合 - 文档 - 子集合 - 文档 - 数据] 我想要我表中的所有数据以及我想要 3 件事的数据,( ITEM ID,ITEM DATE , ITEM STATUS) 和一个按钮,它将带我到一个可打印的页面,我想打印我的文档中的所有数据
猜你喜欢
  • 2021-07-20
  • 2020-09-05
  • 1970-01-01
  • 2020-08-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-09-14
相关资源
最近更新 更多