查找未捕获的类型错误：无法读取未定义的属性“长度”答案

【问题标题】：Finding an Uncaught TypeError: Cannot read property 'length' of undefined查找未捕获的类型错误：无法读取未定义的属性“长度”
【发布时间】：2021-03-06 17:24:15
【问题描述】：

我想放置一个函数来检查购物车是空的还是满的，并根据这个逻辑显示输出。如果 cart.line_items.length 不是 true，那么它应该运行 EmptyCart 函数。请注意，“line_items”是来自 API 响应的数组。然后它应该循环遍历每个项目并在 material-ui 网格中显示该项目。这是我的 .jsx 代码。

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

const Cart = ({ cart }) => {

    const classes = useStyles();
//this function checks whether the cart is empty or filled
    const isEmpty = !cart.line_items.length;

    const EmptyCart = () => (
        <Typography variant="subtitle1" > Your cart is Empty </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_wih_symbol}
                </Typography>
                <div >
                    <Button className={classes.emptyButton} size="large" type="button" variant="contained" color="secondary" > Empty Cart </Button>
                    <Button className={classes.checkoutButton} size="large" type="button" variant="contained" color="primary" >Checkout</Button>
                </div>
            </div>
        </>
    );

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

export default Cart

【问题讨论】：

标签： javascript material-ui jsx

【解决方案1】：

您需要检查cart.line_items 是否为空或未定义。

如下：

const isEmpty = !cart.line_items || !cart.line_items.length;

【讨论】：

【解决方案2】：

您可以通过在 JS 中使用 optional chaining 来为 undefined 添加额外的检查，如下所示：-

const isEmpty = !cart.line_items?.length;

【讨论】：