未捕获的类型错误:无法读取 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