ReactJS物件映射，未定義的屬性，即使它在那里

我正在嘗試使用來自 Firebase 和 ReactJs 的 Cloud Firestore 創建一個 Stripe 實施計劃，但我遇到了一個我無法弄清楚的問題。我有這個物件，我想訪問它的 priceId

{
    "tax_code": null,
    "images": [],
    "name": "Premium Plan",
    "description": "4k   HDR   5 Family Members",
    "active": true,
    "role": null,
    "metadata": {},
    "prices": {
        "priceId": "price_1LpD2rHO1lI6EMwl58lLNxRo",
        "product": "prod_MYJgCtqv3JyCPn",
        "metadata": {},
        "unit_amount": 15000,
        "transform_quantity": null,
        "interval_count": 1,
        "tiers_mode": null,
        "description": "150",
        "trial_period_days": null,
        "type": "recurring",
        "active": true,
        "tiers": null,
        "interval": "month",
        "tax_behavior": "unspecified",
        "currency": "dkk",
        "recurring": {
            "trial_period_days": null,
            "usage_type": "licensed",
            "interval_count": 1,
            "interval": "month",
            "aggregate_usage": null
        },
        "billing_scheme": "per_unit"
    }
}

這就是我的代碼的樣子。首先，我從 CloudFirestore 獲取資料并創建一個物件，該物件在每個產品中都有價格 ID。比在回傳時我試圖映射這個物件，并獲取 priceId。由于某種原因，這不起作用。如果console.log(productData?.prices?.priceId)它向我顯示 priceId，但它會顯示未定義，如下圖所示： 。

我需要 priceId，所以我使 loadCheckout 作業。謝謝您的幫助。

function PlanScreen() {
  const [products, setProducts] = useState([]);
  const user = useSelector(selectUser);

  //   console.log(products)
  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const q = query(collection(db, "products"), where("active", "==", true));
    const querySnapshot = await getDocs(q);
    const products = {};
    const data = querySnapshot.forEach(async (productDoc) => {
      products[productDoc.id] = productDoc.data();
      const subQuery = query(
        collection(db, `products/${productDoc.id}/prices`)
      );
      const subQDetails = await getDocs(subQuery);
      subQDetails.docs.map((price) => {
        products[productDoc.id].prices = {
          priceId: price.id,
          ...price.data(),
        };
      });
    });
    setProducts(products);
  };

  const loadCheckout = async (priceId) => {
    const firstQ = collection(db, `customers/${user.uid}/checkout_sessions`);
    const secondQ = query(
      addDoc(firstQ, {
        price: priceId,
        success_url: window.location.origin,
        cancel_url: window.location.origin,
      })
    );

    onSnapshot(secondQ, async (snap) => {
      const { error, sessionId } = snap.data();

      if (error) {
        alert(`An error occured: ${error.message}`);
        console.log(error.message);
      }
      if (sessionId) {
        const stripe = await loadStripe(
          "pk_test_51LpCKmHO1lI6EMwlLvPQQSBZ2A6JTa6PmqXwLcYstnaf04qaG7CQYGW3DYWmrIL4QjzXfKQnDQaIeWSjrHyLx0fY000otcrJ7t"
        );
        stripe.redirectToCheckout({ sessionId });
      }
    });
  };

  return (
    <div className="planScreen">
      {Object.entries(products).map(([productId, productData]) => {
        console.log(productData);
        return (
          <div className="planScreen_plan" key={productId}>
            <div className="planScreen_info">
              <h5>{productData.name}</h5>
              <h6>{productData.description}</h6>
              <h6>{productData?.prices?.priceId}</h6>
            </div>

            <button onClick={() => loadCheckout(productData.prices.priceId)}>
              Subscribe
            </button>
          </div>
        );
      })}
    </div>
  );
}

uj5u.com熱心網友回復：

您的呼叫setProducts(products)在任何一個await getDocs(subQuery)完成之前運行，因為forEach它不是異步運算子。

您可以將呼叫移動setProducts(products)到回呼中（最簡單），或者使用for of回圈（它允許在其主體中進行異步回呼）來回圈產品。

將呼叫移動setProducts到回呼中

const fetchData = async () => {
  const q = query(collection(db, "products"), where("active", "==", true));
  const querySnapshot = await getDocs(q);
  const products = {};
  const data = querySnapshot.forEach(async (productDoc) => {
    products[productDoc.id] = productDoc.data();
    const subQuery = query(
      collection(db, `products/${productDoc.id}/prices`)
    );
    const subQDetails = await getDocs(subQuery);
    subQDetails.docs.map((price) => {
      products[productDoc.id].prices = {
        priceId: price.id,
        ...price.data(),
      };
    });
    setProducts(products); // ??
  });
};

使用for of回圈

const fetchData = async () => {
  const q = query(collection(db, "products"), where("active", "==", true));
  const querySnapshot = await getDocs(q);
  const products = {};
  const data = 
  for (var productDoc of querySnapshot.docs) { // ??
    products[productDoc.id] = productDoc.data();
    const subQuery = query(
      collection(db, `products/${productDoc.id}/prices`)
    );
    const subQDetails = await getDocs(subQuery);
    subQDetails.docs.map((price) => {
      products[productDoc.id].prices = {
        priceId: price.id,
        ...price.data(),
      };
    });
  };
  setProducts(products);
};

標籤：Google Cloud Collective javascript反应火力基地谷歌云火库

上一篇：盡管呼叫了“initializeApp()”，但“沒有創建任何Firebase應用程式‘[DEFAULT]’”（Flutter，Firebase）

下一篇：NPM不適用于Docker映像php:8.1-fpm-alpine