JavaScript对象属性访问：深入理解异步数据加载与React状态更新

useEffect(() => {
  // ... stripe initialization ...

  const q = query(collection(db, "products"), where("active", "==", true));
  getDocs(q).then((querySnapshot) => { // (1) 主产品数据获取
    const products = {};
    querySnapshot.forEach(async (doc) => { // (2) 遍历主产品
      products[doc.id] = doc.data();
      const priceSnapshot = await getDocs( // (3) 异步获取价格
        collection(db, "products", doc.id, "prices")
      );
      priceSnapshot.forEach((price) => {
        products[doc.id].prices = {
          priceId: price.id,
          priceData: price.data(),
        };
      });
    });
    setProducts(products); // (4) 更新状态
  });
}, []);

import React, { useState, useEffect } from 'react';
import { loadStripe } from '@stripe/stripe-js';
import { collection, query, where, getDocs, doc, addDoc, onSnapshot } from 'firebase/firestore';
import { db } from './firebase'; // 假设你的firebase实例
import { useAuth } from './AuthContext'; // 假设你的认证上下文
import { Container, Row, Col, Card, Button, Spinner } from 'react-bootstrap';

export default function Subscription() {
  const [loading, setLoading] = useState(false);
  const [products, setProducts] = useState({}); // 初始化为对象
  const { currentUser } = useAuth();
  const [stripe, setStripe] = useState(null);

  useEffect(() => {
    const initializeStripe = async () => {
      const stripeInstance = await loadStripe(
        process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY
      );
      setStripe(stripeInstance);
    };

    initializeStripe();

    const fetchProductsAndPrices = async () => {
      try {
        const q = query(collection(db, "products"), where("active", "==", true));
        const querySnapshot = await getDocs(q); // 等待主产品数据获取完成

        const productsMap = {};
        const priceFetchPromises = []; // 用于收集所有价格获取的Promise

        querySnapshot.forEach((doc) => {
          const productData = doc.data();
          productsMap[doc.id] = { ...productData }; // 复制一份，避免直接修改doc.data()

          // 为每个产品的价格获取创建一个Promise
          const pricePromise = getDocs(
            collection(db, "products", doc.id, "prices")
          ).then((priceSnapshot) => {
            // 假设每个产品只有一个价格，或者你希望覆盖
            priceSnapshot.forEach((price) => {
              productsMap[doc.id].prices = {
                priceId: price.id,
                priceData: price.data(),
              };
            });
          }).catch(error => {
            console.error(`Error fetching prices for product ${doc.id}:`, error);
            // 可以选择在这里处理错误，例如设置一个默认价格或跳过
          });
          priceFetchPromises.push(pricePromise);
        });

        // 等待所有价格获取的Promise都完成
        await Promise.all(priceFetchPromises);

        // 所有产品及其价格都已加载并设置到productsMap中
        setProducts(productsMap); // 最后，一次性更新状态
      } catch (error) {
        console.error("Error fetching products or prices:", error);
        // 处理整体数据获取错误
      }
    };

    fetchProductsAndPrices(); // 调用异步数据获取函数
  }, []); // 依赖项为空数组，只在组件挂载时执行一次

  async function loadCheckOut(priceId) {
    setLoading(true);
    const usersRef = doc(collection(db, "users"), currentUser.uid);
    const checkoutSessionRef = collection(usersRef, "checkout_sessions");

    const docRef = await addDoc(checkoutSessionRef, {
      price: priceId,
      trial_from_plan: false,
      success_url: window.location.origin,
      cancel_url: window.location.origin,
    });

    onSnapshot(docRef, (snap) => {
      const { error, sessionId } = snap.data();
      if (error) {
        alert(`An error occurred: ${error.message}`);
        setLoading(false); // 错误时也要取消加载状态
      }

      if (sessionId && stripe) {
        stripe.redirectToCheckout({ sessionId });
      }
    });
  }

  return (
    <>
      <Container className="mt-4 mb-4">
        <h1 className="text-center mt-4">Choose Your Plan</h1>
        <Row className="justify-content-center mt-4">
          {Object.entries(products).map(([productId, productData]) => {
            // 在这里，productData.prices 应该已经就绪
            // console.log(productData);
            // console.log(productData.prices);

            return (
              <Col md={4} key={productId}>
                <Card>
                  <Card.Header className="text-center">
                    <h5>{productData.name}</h5>
                    {/* 使用可选链操作符 ?. 确保在 prices 属性未完全加载时不会报错 */}
                    <h5>${(productData?.prices?.priceData?.unit_amount / 100).toFixed(2)} / {productData?.prices?.priceData?.interval}</h5>
                  </Card.Header>
                  <Card.Body>
                    <h6>{productData.description}</h6>
                    <Button
                      onClick={() => loadCheckOut(productData?.prices?.priceId)}
                      variant="primary"
                      block
                      disabled={loading || !productData?.prices?.priceId} // 按钮禁用条件增加价格ID是否可用
                    >
                      {loading ? (
                        <>
                          <Spinner
                            animation="border"
                            size="sm"
                            className="mr-2"
                          />
                          Loading...
                        </>
                      ) : (
                        "Subscribe"
                      )}
                    </Button>
                  </Card.Body>
                </Card>
              </Col>
            );
          })}
        </Row>
      </Container>
    </>
  );
}