React Js Map 函數不適用於嵌套數組

Question

我目前正在嘗試學習 ReactJS。 對於我的項目，我從 firestore 獲取數據，然后想在屏幕上顯示。

Firestore 中的數據存儲為：

category: "Lemon"
currentUser:
  createdAt: October 21, 2020 at 2:52:25 PM UTC+5:30
  displayName: null
  email: "email@ymail.com"
id: "123"
dish: "vs"
image: "imageurl"
price: "8"

要檢索此數據，我正在使用：

useEffect(() => {
  let m = [];
  var docRef = firestore.collection("Dish");
  docRef.get().then(function (querySnapshot) {
    querySnapshot.forEach(function (doc) {
      m.push({
        id: doc.id,
        category: doc.data().category,
      });
    });

    Setmida(m);

    Setmid(false);

    if (mid === false) {
      let big = [];
      mida.map((f) => {
        let items = [];
        var docRef = firestore
          .collection("Dish")
          .where("category", "==", "Lemon");
        docRef.get().then(function (querySnapshot) {
          querySnapshot.forEach(function (doc) {
            items.push({
              dish: doc.data().dish,
            });
          });
        });

        big.push({
          id: f.id,
          category: f.category,
          items,
        });
      });

      Setdata(big);

      Setload(false);
    }
  });
}, [mid]);

類別和 Id 很好。 但是當我嘗試訪問項目時出現問題。 到目前為止，我已經嘗試通過索引訪問它：

data[0].items[0]

但它只是在控制台中顯示undefined 。

嘗試在data[0].items上使用 map 時。 它什么都不做，沒有錯誤，只是不會打印任何細節。

Answer 1

你的問題在這里：

  mida.map((f) => {
        let items = [];
        var docRef = firestore
          .collection("Dish")
          .where("category", "==", "Lemon");
        docRef.get().then(function (querySnapshot) {
          querySnapshot.forEach(function (doc) {
            items.push({
              dish: doc.data().dish,
            });
          });
        });

        big.push({
          id: f.id,
          category: f.category,
          items,
        });

Array.map運行同步，讓您通過在所有的項目快速運行mida並拉開docRef.get()承諾，當您去。 但是，對.map的調用將在任何 Promises 完成之前運行到最后，因此當您嘗試在循環運行時將items推入big ，對get的調用尚未返回，因此items不會返回但包含任何東西。

您可以通過將Promise.all映射到數組中，然后使用Promise.all等待它們完成，然后使用結果調用Setdata解決此問題。

像這樣的東西（未經測試）：

 if (mid === false) {
      let big = []
      Promise.all(
        mida.map(f => {
          let items = []
          var docRef = firestore
            .collection('Dish')
            .where('category', '==', 'Lemon')
          return docRef.get().then(function(querySnapshot) {
            querySnapshot.forEach(function(doc) {
              items.push({
                dish: doc.data().dish,
              })
            })
            return { id: f.id, category: f.category, items }
          })
        }),
      ).then(results => {
        Setdata(results)
        Setload(false)
      })
    }