Uncaught TypeError: Cannot read properties of undefined (reading 'source') in CartItem

Question

我在通过 cartitem 访问 购物车 中的数据时出错。我不太擅长这个。有人可以帮我改正错误吗？？

import React from 'react'
import { Typography, Button, Card, CardActions, CardContent, CardMedia } from '@material-ui/core';

import useStyles from './styles';

const CartItem = ({ item }) => {
    const classes = useStyles
    return (
        <Card>
            <CardMedia image={item.media.source} alt={item.name} className={classes.media} />
            <CardContent className={classes.cardContent}>
                <Typography variant="h4">{item.name}</Typography>
                <Typography variant="h5">{item.line_total.formatted_with_symbol}</Typography>
            </CardContent>
            <CardActions className={classes.cardActions}>
                <div className={classes.buttons}>
                    <Button type="button" size="small">-</Button>
                    <Typography>{item.quantity}</Typography>
                    <Button type="button" size="small">+</Button>
                </div>
                <Button variant="contained" type="button" color="secondary">Remove</Button>
            </CardActions>
        </Card>
    )
}

export default CartItem

These are a few errors poppoing in the browser

Answer 1

我们需要更多信息来准确说明原因，但根据错误，'media'（或可能是项目）似乎未定义。

您可以使用以下语法添加一些安全性：

<CardMedia image={item?.media?.source} alt={item.name} className={classes.media} />

注意“？”上面....有关其作用的更多信息 here

Answer 2

添加到@terpinmd 的答案，以及您对失败道具的评论。使用这个

<CardMedia image={item?.media?.source || ““} alt={item.name} className={classes.media} />

如果 item 或 item.media 未定义，这会给出一个空字符串作为 image 的道具。

Uncaught TypeError: Cannot read properties of undefined (reading 'source') in CartItem

Uncaught TypeError: Cannot read properties of undefined (reading 'source') in CartItem

javascript

html

css

reactjs

commerce.js