Question

我刚刚开始学习React，并且对React的组件和功能有一些了解。在学习反应中前进时，我碰巧开发了一个单页应用程序。为此，我正在开发一个渲染函数方法，然后碰巧遇到了此错误。

错误消息

TypeError：无法读取未定义的属性“图像”

我尝试过的事情 我尝试更改在函数RenderCard中传递的参数类型，而不是道具的参数。但这也不起作用。

代码

这是我的渲染卡方法

function RenderCard({item}){
    return(
        <Card>
            <CardImg src={item.image} alt={item.name}/>
            <CardBody>
                <CardTitle> {item.name}</CardTitle>
                {item.designation ? <CardSubtitle>{item.designation}</CardSubtitle>
                   :null}
                <CardText>{item.description}</CardText>   
            </CardBody>
        </Card>
    );
}

正在使用的功能

function Home(props){
    return (
         <div className="container">
            <div className="row align-items-start">
                <div className="col-12 col-md m-1">
                    <RenderCard item={props.dish} />
                </div>
                <div className="col-12 col-md m-1">
                    <RenderCard item={props.promotion} />
                </div>
                <div className="col-12 col-md-1">
                    <RenderCard item={props.leader} />
                </div>
            </div>
         </div>
    );
}

我的JSON格式文件的一部分

export const DISHES =
[
    {
    id: 0,
    name:'Uthappizza',
    image: '/public/assets/images/uthappizza.png',
    category: 'mains',
    label:'Hot',
    price:'4.99',
    featured: true,
    description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.'                    
    },
    {
    id: 1,
    name:'Zucchipakoda',
    image: '/public/assets/images/zucchipakoda.png',
    category: 'appetizer',
    label:'',
    price:'1.99',
    featured: false,
    description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce'
    },

还有另一种定义“图像”属性的方法

0 个答案: