React电商项目：购物车徽章不更新及total_items未定义报错

针对你遇到的三个问题，逐个分析并给出修复方案：

1. 购物车徽章无法自动更新 #

原因：App.js中直接在组件函数体内执行了commerce.cart.empty();，这会导致组件每次渲染时都清空购物车，覆盖添加商品后的购物车状态，徽章无法获取最新数量。
修复：移除这行清空购物车的代码，仅在测试或特定业务场景下手动调用，不要放在组件渲染流程中。

2. 首次加载报错"Cannot read properties of undefined (reading 'total_items')" #

原因：组件首次渲染时，fetchCart是异步操作，此时cart还未获取到后端返回的完整数据，直接访问cart.total_items会因数据未就绪导致报错。
修复：给cart初始状态设为null，渲染时做空值判断，同时给totalItems设置默认兜底值。

3. 点击添加商品后控制台无法显示最新购物车数据 #

原因：console.log(cart)写在组件函数顶层，仅在首次渲染时执行一次，不会跟踪cart状态的更新。
修复：使用useEffect监听cart状态变化，状态更新时自动打印最新数据。

修复后的完整代码 #

App.js

import React, { useState, useEffect } from 'react';

import Products from './components/Products/Products';
import Navbar from './components/Navbar/Navbar';
import { commerce } from './lib/commerce';

const App = () => {
    const [products, setProducts] = useState([]);
    // 初始状态设为null，便于判断异步请求是否完成
    const [cart, setCart] = useState(null);

    const fetchProducts = async () => {
        const { data } = await commerce.products.list();
        setProducts(data);
    };

    const fetchCart = async () => {
        setCart(await commerce.cart.retrieve());
    };

    const handleAddToCart = async (productId, quantity) => {
        const item = await commerce.cart.add(productId, quantity);
        // 更新为最新购物车状态
        setCart(item.cart);
    };

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

    // 监听cart状态变化，打印最新数据
    useEffect(() => {
        console.log('当前购物车数据:', cart);
    }, [cart]);

    return (
        <div>
            {/* 空值判断+默认值兜底，避免报错 */}
            <Navbar totalItems={cart?.total_items || 0} />
            <Products products={products} onAddToCart={handleAddToCart} />
        </div>
    );
}

export default App;

Navbar.js（可选优化）

在组件内部再做一层兜底，确保徽章内容不会出现undefined：

import React from 'react'

import { AppBar, Typography, Toolbar, IconButton, Badge, Menu, MenuItem } from '@material-ui/core'
import { ShoppingCart } from '@material-ui/icons'

import useStyles from './styles'
const Navbar = ({ totalItems }) => {
    const classes = useStyles();
    // 兜底处理，确保badgeContent为有效数字
    const displayItems = totalItems ?? 0;

    return (
        <>
            <AppBar position='fixed' className={classes.appBar} color='inherit' >
                <Toolbar>
                    <Typography variant='h6' color='inherit' className={classes.title}>
                        <img src="https://image.shutterstock.com/image-photo/image-260nw-611143775.jpg" alt="e-commerce" className={classes.image} height="25px" />
                        E-store
                    </Typography>
                    <div className={classes.grow} />
                    <div className={classes.button}>
                        <IconButton aria-label='Show Items' color='inherit'>
                            <Badge overlap="rectangular" badgeContent={displayItems} color='secondary'>
                                <ShoppingCart />
                            </Badge>
                        </IconButton>
                    </div>
                </Toolbar>
            </AppBar>
        </>
    )
}

export default Navbar

commerce.js（无需修改）

import Commerce from "@chec/commerce.js";

export const commerce = new Commerce(
  "HERE_MY_API_KEY"
);

内容的提问来源于stack exchange，提问作者Anubhav Joria