显示集合中的所有文档 react firebase

Question

我有一个名为“journee”的集合，我想构建一个包含所有元素的列表，所以我得到了这样的所有数据：

export async function getAllJournaux() {
    const journaux = {};
    const querySnapshot = await getDocs(collection(db, "journaux"));
    querySnapshot.forEach((doc) => {
    // doc.data() is never undefined for query doc snapshots
        // console.log(doc.id, " => ", doc.data());
        journaux[doc.id] = doc.data();
    });
    return journaux;
}

然后在我的页面上使用 useEffect getIt，例如：

const [journaux, setJournaux] = React.useState();

useEffect(() => {
    const getJournaux = async () => {
        try {
            const getJournaux = await getAllJournaux();
            setJournaux(getJournaux);
        } catch(error) {
            // handle any rejections/errors/etc
        }
    };
    getJournaux(); // <-- fetch/compute coupeur value
}, []);
if (!journaux){
    console.log("wait"); // or loading indicator/etc
}else{
    console.log(journaux);
}

但是如何在我的屏幕上制作一个包含数据的列表，目前我只是通过 console.log 访问它。

console.log

的输出

{
    "8SlEz4CslmTMSxWuqB8W2lDICwj22022-05-02": {
        "date": "2022-05-02",
        "billetage": {
            "5": 0,
            "10": 0,
            "25": 0,
            "50": 0,
            "100": 0,
            "200": 0,
            "250": 0,
            "500": 0,
            "1000": "2",
            "2000": "3",
            "5000": "4",
            "10000": "5"
        },
        "pt": "3400000",
        "at": "30000",
        "vt": "450000",
        "coupeur": "qKh2entwU7YD0wcxWRI3"
    },
    "8SlEz4CslmTMSxWuqB8W2lDICwj22022-05-03": {
        "at": "555",
        "date": "2022-05-03",
        "coupeur": "YuYRYzWj4CVidsmAjO1d",
        "vt": "334",
        "pt": "5555"
    },
    "KiuU1xQaKWTAx5mt9XL8vBpY3Y822022-03-01": {
        "pt": "150000",
        "vt": "450000",
        "date": "2022-03-01",
        "at": "3000",
        "billetage": {
            "5": "5",
            "10": "3",
            "25": "5",
            "50": "1",
            "100": "2",
            "200": "4",
            "250": "2",
            "500": "3",
            "1000": "6",
            "2000": "3",
            "5000": "4",
            "10000": "2"
        },
        "coupeur": "Ad5g5AE2HdqbZGzhu7G5"
    },
    "KiuU1xQaKWTAx5mt9XL8vBpY3Y822022-05-11": {
        "coupeur": "qKh2entwU7YD0wcxWRI3",
        "billetage": {
            "5": 0,
            "10": 0,
            "25": 0,
            "50": 0,
            "100": 0,
            "200": 0,
            "250": 0,
            "500": 0,
            "1000": 0,
            "2000": "5",
            "5000": "3",
            "10000": "10"
        },
        "pt": "30000",
        "date": "2022-05-11",
        "at": "100",
        "vt": "200000"
    },
    "KiuU1xQaKWTAx5mt9XL8vBpY3Y822022-05-23T14:03": {
        "date": "2022-05-23T14:03",
        "pt": "50000",
        "coupeur": "",
        "at": "130000",
        "vt": "200000",
        "billetage": {
            "5": 0,
            "10": 0,
            "25": 0,
            "50": 0,
            "100": 0,
            "200": 0,
            "250": 0,
            "500": 0,
            "1000": 0,
            "2000": "3",
            "5000": "5",
            "10000": "2"
        }
    }
}

谢谢

Answer 1

const Component = () => {
  const [journaux, setJournaux] = useState();
  useEffect(() => {
    const getJournaux = async () => {
      try {
        const getJournaux = await getAllJournaux();
        setJournaux(getJournaux);
      } catch (error) {}
    };
    getJournaux();
  }, []);
  
  // Change .prop1 to a property found in each object of the list
  return <ul>
      {(journaux || []).map(item => (
          <li>{item.prop1}</li>
      ))}
  </ul>
};

Answer 2

getAllJournaux 正在返回一个对象，因此您必须使用 Object.keys 来迭代

const Component = () => {
  const [journaux, setJournaux] = useState();
  useEffect(() => {
    const getJournaux = async () => {
      try {
        const getJournaux = await getAllJournaux();
        setJournaux(getJournaux);
      } catch (error) {}
    };
    getJournaux();
  }, []);
  
  return <ul>
      {Object.keys(journaux || {}).map(item => (
          <li>{item.coupeur}</li>
      ))}
  </ul>
};

显示集合中的所有文档 react firebase

display all documents from a collection react firebase

firebase

reactjs

google-cloud-firestore

use-effect