开发者问题收集

未捕获的类型错误:无法读取 CartItem 中未定义的属性(读取“源”)

2022-02-26
231

通过 cartitem 访问 cart 中的数据时出现错误。我不太擅长这个。有人能帮我纠正错误吗?

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

这些是浏览器中弹出的一些错误

2个回答

我们需要更多信息来准确说明原因,但根据错误,“media”(或可能是 item)似乎未定义。

您可以使用以下语法增加一些安全性:

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

请注意上面的“?”......有关其作用的更多信息,请参见 此处

terpinmd
2022-02-26

添加到 @terpinmd 的答案中,以及您对失败道具的评论。使用此

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

如果 item 或 item.media 未定义,这会将空字符串作为道具提供给图像。

Musadiq Peerzada
2022-02-26