Javascript 道具未捕获类型错误：无法读取属性'；名称'；未定义的

伙计们，我需要帮助，我正在将一个道具从我的products.jsx文件传递到我的product.jsx文件，并且得到了错误

Product.jsx:12 Uncaught TypeError: Cannot read property 'name' of undefined

这是我的Products.jsx文件

import React from 'react';
import { Grid } from '@material-ui/core';
import Product from './Product/Product';

const products =[
    {id: 1 , name: 'Shoes', description: 'walking shoes', price: '#5'},
    {id: 2 , name: 'apple', description: 'macbook', price: '#10'},
];



const Products = () => {

        return ( 
    <Main>
        <Grid container justify="center" spacing={4}>
            {products.map((product) => (
                <Grid item key={product.id} xs={12} sm={6} md={4} lg={3}>
                    <Product product={product}/>
                </Grid>
            ))}
        </Grid>
    </Main>

        )
}

export default Products

从“React”导入React；
从'@material ui/core'导入{Grid}；
从“./产品/产品”进口产品；
康斯特产品=[
{id:1，名称：'Shoes'，描述：'walking Shoes'，价格：'#5'}，
{id:2，名称：'apple'，描述：'macbook'，价格：'#10'}，
];
常数乘积=（）=>{
报税表（
{products.map（（产品）=>(
))}
)
}
导出默认产品

这是我的product.jsx文件

import React from 'react'
import { Card, CardMedia, CardContent, CardActions, Typography, IconButton } from '@material-ui/core';
import { AddShoppingCart } from '@material-ui/icons';
import useStyles from './styles'

const Product = ({ product }) => {

    const classes = useStyles();
    
    return (
        <Card className={classes.root}>
            <CardMedia className={classes.media} image='' title={product.name} />
              <CardContent>
                        <div className={classes.cardContent}>
                            <Typography gutterBottom variant="h5" component="h2">
                                {product.name}
                            </Typography>
                            <Typography gutterBottom variant="h5" component="h2">
                                {product.price}
                            </Typography>
                        </div>
                        <Typography variant="h2" color="textSecondary" component="p">{product.description}</Typography>
              </CardContent>
              <CardActions disableSpacing className={classes.cardActions}>
                    <IconButton aria-label="Add to Cart">
                    <AddShoppingCart />
                    </IconButton>
              </CardActions>
        </Card>
    )
}

export default Product

从“React”导入React
从“@material ui/core”导入{Card、CardMedia、CardContent、CardActions、排版、IconButton}；
从“@material ui/icons”导入{AddShoppingCart}；
从“./styles”导入useStyles
常量乘积=（{Product}）=>{
const classes=useStyles（）；
返回(
{product.name}
{产品价格}
{product.description}
)
}
导出默认产品

---

我似乎没有看到错误，它不应该给我无法读取属性名错误请帮助

您的代码看起来很完美，应该可以正常工作，但为了安全起见，请使用null传播来避免访问未定义的属性

从“React”导入React
从“@material ui/core”导入{Card、CardMedia、CardContent、CardActions、排版、IconButton}；
从“@material ui/icons”导入{AddShoppingCart}；
从“./styles”导入useStyles
常量乘积=（{Product}）=>{
const classes=useStyles（）；
返回(
{product？.name}
{产品？.price}
{产品？.description}
)
}
导出默认产品

使用空检查可避免此类问题

Products.jsx

    const Products = () => {
       return ( 
        <Main>
            <Grid container justify="center" spacing={4}>
                {products && products.map((product) => (
                    <Grid item key={product.id} xs={12} sm={6} md={4} lg={3}>
                        <Product product={product}/>
                    </Grid>
                ))}
            </Grid>
        </Main>
   )}

const Products=（）=>{
报税表（
{products&&products.map（（产品）=>(
))}
)}

Product.jsx

const Product = ({ product }) => {
    const classes = useStyles();
    return (
        <Card className={classes.root}>
            <CardMedia className={classes.media} image='' title={product?.name} />
              <CardContent>
                        <div className={classes.cardContent}>
                            <Typography gutterBottom variant="h5" component="h2">
                                {product?.name}
                            </Typography>
                            <Typography gutterBottom variant="h5" component="h2">
                                {product?.price}
                            </Typography>
                        </div>
                        <Typography variant="h2" color="textSecondary" component="p">{product.description}</Typography>
              </CardContent>
              <CardActions disableSpacing className={classes.cardActions}>
                    <IconButton aria-label="Add to Cart">
                    <AddShoppingCart />
                    </IconButton>
              </CardActions>
        </Card>
    )
}

constproduct=（{Product}）=>{
const classes=useStyles（）；
返回(
{product？.name}
{产品？.price}
{product.description}
)
}

你能分享你的json响应来识别你的问题吗jsx:12 Uncaught TypeError:无法读取UndefinedWaw的属性'name'，错误似乎已经消失了，但现在我得到了

失败的道具类型：Material UI:要么是'children'，'image'，要么是'children'，'image'，必须指定'src'或'component'属性。

@austin将图像URL分配给image='”（）您的意思是

image=“（）“

。就像那样？@Opia Austin喜欢这样谢谢你的帮助谢谢你的建议奏效了，我现在有这个错误

失败的道具类型：材质UI：必须指定'children'、'image'、'src'或'component'道具。

它与材质UI的

CardMedia

组件相关。这个问题已经在这里讨论过了：