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

Question

当在 commerce js 中访问购物车对象的 line_items 数组时，我收到一条错误，指出它未定义，但我仍然可以在控制台中看到它。这是一些屏幕截图：错误：TypeError: Cannot read property 'length' of undefinedCartD:/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 闭包中编写，在几秒钟后的视频中解释，但经过一天的挣扎，我也意识到了: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>

)

Answer 2

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

Answer 3

尝试使用可选链：

const isEmpty = !cart.line_items?.length

仅当数组存在时才会询问数组长度，从而防止出现未定义的错误。这意味着它将返回 false ifcart.line_items == undefined或 if cart.line_items.length == 0。

也许我参加聚会有点晚了，但我陷入了同一个部分，这解决了我的问题（而且我认为它看起来很整洁）

Answer 4

问题 初始渲染上没有 cart.line_items，因为初始状态是空对象 ({})。

const [cart, setCart] = useState({});

解决方案 为初始渲染提供有效的初始状态，以便有一个真实的、已定义的 cart.line_items 对象，其中具有 length 属性，即！cart.line_items.length; 可以解析为一个值并且不会抛出错误。

const [cart, setCart] = useState({ line_items: [] });