类型错误：无法读取未定义的属性(读取"img")反应

Question

我需要帮助，当我编译代码时，我得到了这个错误。我把项目放在文件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``;

Answer 1

在发送到src之前尝试检查图像是否存在

items && test.img ? test.img : "https://www.example.com/example.png"

所以把它添加到你的样式图像中:

<Image src={items && test.img ? test.img : "https://www.example.com/example.png"} />

Answer 2

您必须检查您的项目道具是否获得正确的图像或img源。为此，你必须将发送道具的组件作为道具。

在这里你可以检查你的项目是否有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属性。

Answer 3

你的错误有2个可能的原因，要么img不是你的data.js中的关键，要么你错误地包括一个组件，你在树中有你的产品组件和项目道具。解决方案1:检查是否在data.js中设置了img键

<Image src = { item && item.img ? item.img : "https://sometestimage.com/test.jpg" } />

如果你渲染了测试图像，那么关键字img就在data.js中，但是要么包含Product组件的组件没有正确地包含在树中，要么你包含了Product组件，而不是它的母组件。解决方案2:检查如何在组件树中包括/导入Product组件及其母组件。

Answer 4

我目前正在遵循相同的教程，并得到相同的错误。

在我的情况下，它是首页自动导入从其他组件页面导入产品，所以你不能得到图像，你应该检查你的主页和替换:

import Product from '../components/Product'

import Product from '../components/Products'