javascript - 类型错误 : Cannot read property 'length' of undefined in Commerce JS when accessing cart

Question

在 commerce js 中访问购物车对象的 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

购物车对象的控制台日志:
应用程序.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 没有按预期导入，我无法访问购物车对象的任何属性。
提前致谢!

Answer 1

发生这种情况是因为购物车内容在页面打开时不会立即从电子商务 api 加载，然后由于错误而卡住了。
您可以先检查是否有购物车内容，然后删除 isEmpty 变量并在 javascript 闭包中写入，几秒钟后在视频中进行了解释，但是经过一天的挣扎，我也意识到了 :D

if(!cart.line_items)
    return  '...loading';


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