类型错误：访问购物车时无法读取 Commerce JS 中未定义的属性“长度”

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

似乎道具没有按预期导入，我无法访问购物车对象的任何属性。

Answer 1

发生这种情况是因为页面打开时购物车内容不会立即从电子商务 API 加载，然后由于错误而卡住了。你可以先检查是否有购物车内容，然后删除 isEmpty 变量，然后在 javascript 闭包中编写，在几秒钟后的视频中解释，但经过一天的挣扎，我也意识到了:Dif(!cart.line_items)&nbsp; &nbsp; return&nbsp; '...loading';return (&nbsp; &nbsp; <div className={classes.toolbar}>&nbsp; &nbsp; &nbsp; &nbsp; <Typography className={classes.title} variant="h3"> Your Shopping Cart&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </Typography>&nbsp; &nbsp; &nbsp; &nbsp; {!cart.line_items.length ? <EmptyCart /> : <FilledCart />}&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; </div>)

Answer 2

尝试&nbsp;const isEmpty = Object.keys(cart).length && !cart.line_items.length;&nbsp;未从服务器接收数据，但组件已呈现，这就是为什么卡一开始是未定义的。

Answer 3

尝试使用可选链：const isEmpty = !cart.line_items?.length仅当数组存在时才会询问数组长度，从而防止出现未定义的错误。这意味着它将返回 false ifcart.line_items == undefined或 if&nbsp;cart.line_items.length == 0。也许我参加聚会有点晚了，但我陷入了同一个部分，这解决了我的问题（而且我认为它看起来很整洁）

Answer 4

问题&nbsp;初始渲染上没有 cart.line_items，因为初始状态是空对象 ({})。const [cart, setCart] = useState({});解决方案&nbsp;为初始渲染提供有效的初始状态，以便有一个真实的、已定义的 cart.line_items 对象，其中具有 length 属性，即！cart.line_items.length;&nbsp;可以解析为一个值并且不会抛出错误。const [cart, setCart] = useState({ line_items: [] });