当访问 commerce js 中 cart 对象的 line_items 数组时，出现错误，提示未定义，但我仍然可以在控制台中看到它。

以下是一些截图：

错误：

TypeError: Cannot read property 'length' of undefined
Cart
D:/Zayeed/Projects/e_commerce/src/components/Cart/Cart.jsx:7
   4 | 
   5 | const Cart = ({ cart }) => {
   6 |     const classes = useStyles();
>  7 |     const isEmpty = !cart.line_items.length;
   8 | 
   9 |     const EmptyCart = () => (
  10 |         <Typography variant="subtitle1">You have no items in your cart, start adding some.</Typography

我的代码：

import React from 'react'
import { Container, Typography, Button, Grid } from '@material-ui/core'
import useStyles from './styles';

const Cart = ({ cart }) => {
    const classes = useStyles();
    const isEmpty = !cart.line_items.length;

    const EmptyCart = () => (
        <Typography variant="subtitle1">You have no items in your cart, start adding some.</Typography>
    );

    const FilledCart = () => {
        <>
            <Grid container spacing={3}>
                {cart.line_items.map(item => (
                    <Grid item xs={12} sm={4} key={item.id}>
                        <div>{item.name}</div>
                    </Grid>
                ))}
            </Grid>

            <div className={classes.cardDetails}>
                    <Typography variant="h4">Subtotal: {cart.subtotal.formatted_with_symbol}</Typography>
                    <div>
                        <Button className={classes.emptyButton} size="large" type="button" variant="contained" color="secondary">Empty Cart</Button>
                        <Button className={classes.checkout} size="large" type="button" variant="contained" color="primary">Checkout</Button>
                    </div>
            </div>
        </>
    }

    return (
        <Container>
            <div className={classes.toolbar}/>
            <Typography className={classes.title} variant="h3">Your Shopping Cart:</Typography>
            {isEmpty ? <EmptyCart/> : <FilledCart />}
        </Container>
    )
}

export default Cart

cart 对象的控制台日志：

App.js：

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

const App = () => {
    const [ products, setProducts ] = useState([])
    const [cart, setCart] = useState({})

    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()
    }, []);

    return (
        <div>
            <Navbar  totalItems={cart.total_items}/>
            {/* <Products products={products} onAddToCart={handleAddToCart}/> */}
            <Cart cart={cart}/>
        </div>
    )   
}

export default App

似乎 prop 没有按预期导入，我无法访问 cart 对象的任何属性。

提前致谢！