Question

我想放置一个函数来检查购物车是空的还是已填充的，并根据此逻辑显示输出。如果cart.line_items.length 不为真，那么它应该运行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

Answer 1

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

如下：

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

Answer 2

您可以像这样使用 JS 中的可选链来为 undefined 添加额外的检查：-

const isEmpty = !cart.line_items?.length;

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

2 个答案: