javascript - 道具未捕获类型错误：无法读取未定义的属性“名称”

Question

伙计们需要帮助，我正在将我的 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

这是我的 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

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

标签： javascriptreactjs

Answer 1

使用空检查来避免此类问题。

产品.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>
   )}

产品.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>
    )
}