时间戳

首页 > 解决方案 > TypeError：无法读取未定义的属性（读取“img”）反应

reactjs - TypeError：无法读取未定义的属性（读取“img”）反应

问题描述

请各位，我需要帮助，我在编译代码时遇到了这个错误。我将项目放在文件 data.js 中，它适用于其他产品，但对于这个我不知道我缺少什么。

import React from 'react'
import styled from 'styled-components'
import FavoriteBorderOutlinedIcon from '@material-ui/icons/FavoriteBorderOutlined';
import SearchIcon from '@material-ui/icons/Search';
import ShoppingCartOutlinedIcon from '@material-ui/icons/ShoppingCartOutlined'

const Product = ({items}) => {
    return (
        <Container>
        
            <Circle />
            
            <Image src={items.img} />
            
            <Info>
                <Icon>
                    <ShoppingCartOutlinedIcon />
                </Icon>
                <Icon>
                    <SearchIcon />
                </Icon>
                <Icon>
                    <FavoriteBorderOutlinedIcon />
                </Icon>
            </Info>
    </Container>
    )
}

export default Product;



const Container = styled.div`
    flex: 1;
    margin: 5px;
`;
 
const Circle = styled.div``;

const Image = styled.img``;

const Info = styled.div``;

const Icon = styled.div``;

标签： reactjs

解决方案

您必须检查您的物品道具是否获得正确的图像或图像源。为此，您必须从您将项目作为道具发送的地方提供该组件。

在这里您可以检查您的商品是否具有 img 属性。对于该控制台，useEffect 中的项目。

import {useEffect} from "react"

const Product = ({items}) => {
    const useEffect = () => {
      console.log(items)
    }
    return (
        <Container>
        
            <Circle />
            
            <Image src={items.img} />
            
            <Info>
                <Icon>
                    <ShoppingCartOutlinedIcon />
                </Icon>
                <Icon>
                    <SearchIcon />
                </Icon>
                <Icon>
                    <FavoriteBorderOutlinedIcon />
                </Icon>
            </Info>
    </Container>
    )
}

export default Product;

通过这种方式，您可以确认您的商品具有 img 属性。

推荐阅读