我想添加一个函数来检查购物车是空的还是已装满的，并根据此逻辑显示输出。 如果 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