React应用中Commerce.js数据加载与状态管理最佳实践

// App.jsx
import React, { useState, useEffect } from 'react';
import { commerce } from './lib/commerce';
import { Products, Navbar } from './components';

const App = () => {
  const [products, setProducts] = useState([]);
  const [cart, setCart] = useState({}); // 初始状态为 {}

  const fetchProducts = async () => {
    try {
      const { data } = await commerce.products.list();
      setProducts(data);
    } catch (error) {
      console.error("Error fetching products:", error);
    }
  };

  const fetchCart = async () => {
    try {
      setCart(await commerce.cart.retrieve());
    } catch (error) {
      console.error("Error fetching cart:", error);
    }
  };

  const handleAddToCart = async (productId, quantity) => {
    try {
      const { cart } = await commerce.cart.add(productId, quantity);
      setCart(cart);
    } catch (error) {
      console.error("Error adding to cart:", error);
    }
  };

  useEffect(() => {
    fetchProducts();
    fetchCart();
  }, []);

  return (
    <div>
        {/* totalItems 会在 cart 数据加载前为 undefined，需要在 Navbar 内部处理 */}
        <Navbar totalItems={cart.total_items} />
        {/* products 数组在数据加载前为空，需要在 Products 内部处理 */}
        <Products products={products} onAddToCart={handleAddToCart} />
    </div>
  );
};

export default App;

// Navbar.jsx
import React from 'react';
import { AppBar, Toolbar, Typography, IconButton, Badge } from '@material-ui/core';
import { ShoppingCart } from '@material-ui/icons';
import useStyles from './styles';
// 假设 logo 路径正确
import logo from '../../assets/commerce.png'; 

const Navbar = ({ totalItems }) => {
    const classes = useStyles();
  return (
    <>
        <AppBar position="fixed" className={classes.appBar} color='inherit'>
            <Toolbar>
                <Typography variant="h6" className={classes.title} color='inherit'>
                    <img src={logo} alt="VITB Market Place" height="25px" className={classes.image} />
                    VITB Market Place
                </Typography>
                <div className={classes.grow} />
                <div className={classes.button}>
                    <IconButton aria-label="Show cart items" color="inherit">
                        {/* 解决方案：使用逻辑或 (||) 操作符为 totalItems 提供一个默认值 0 */}
                        <Badge badgeContent={totalItems || 0} color="secondary">
                            <ShoppingCart />
                        </Badge>
                    </IconButton>
                </div>
            </Toolbar>
        </AppBar>
    </>
  );
};

export default Navbar;

// Products.jsx
import React from 'react';
import { Grid } from '@material-ui/core';
import Product from './Product/Product';
import useStyles from './styles';

const Products = ({ products, onAddToCart }) => {
    const classes = useStyles();

    // 解决方案：在 products 数组为空时，可以显示加载指示器或“暂无商品”信息
    if (!products || products.length === 0) {
        return <main className={classes.content}><p>商品加载中或暂无商品...</p></main>;
    }

    return(
        <main className={classes.content}>
            <div className={classes.toolbar} />
            <Grid container justify="center" spacing={4}>
                {products.map((product) =>
                   <Grid item key={product.id} xs={12} sm={6} md={4} lg={3}>
                    <Product product={product} onAddToCart={onAddToCart} />
                   </Grid>
                )}
            </Grid>
        </main>
    );
};

export default Products;

// Product.jsx
import React from 'react';
import { Card, CardMedia, CardContent, CardActions, Typography, IconButton } from '@material-ui/core';
import { AddShoppingCart } from '@material-ui/icons';
import useStyles from './styles';

const Product = ({ product, onAddToCart }) => {
    const classes = useStyles();

    // 解决方案：使用可选链操作符 (?) 和逻辑或 (||) 提供默认值
    const imageUrl = product.image?.url || 'https://via.placeholder.com/200?text=No+Image'; // 提供一个默认图片URL
    const priceFormatted = product.price?.formatted_with_symbol || 'N/A'; // 提供默认价格显示

  return (
    <Card className={classes.root}>
        <CardMedia className={classes.media} image={imageUrl} title={product.name || '未知商品'} />
        <CardContent>
            <div className={classes.cardContent}>
                <Typography variant='h6' gutterBottom>
                    {product.name || '商品名称'} {/* 提供默认名称 */}
                </Typography>
                <Typography variant='h5'>
                    {priceFormatted}
                </Typography>
            </div>
            {/* 确保 product.description 存在且为字符串，再进行 dangerouslySetInnerHTML */}
            <Typography 
                dangerouslySetInnerHTML={{ __html: product.description || '<p>暂无描述</p>' }} 
                variant='body2' 
                color="textSecondary" 
            />
        </CardContent>
        <CardActions disableSpacing className={classes.cardActions}>
            {/* 确保 product.id 存在才能添加到购物车 */}
            <IconButton 
                aria-label="Add to Cart" 
                onClick={() => product.id && onAddToCart(product.id, 1)} 
                disabled={!product.id} // 如果没有ID，禁用按钮
            >
                <AddShoppingCart />
            </IconButton>
        </CardActions>
    </Card>
  );
};

export default Product;