TypeError：无法在 React 中读取未定义的属性（读取“名称”）答案

【问题标题】：TypeError: Cannot read properties of undefined (reading 'name') in ReactTypeError：无法在 React 中读取未定义的属性（读取“名称”）
【发布时间】：2021-12-09 22:33:27
【问题描述】：

我收到以下错误 TypeError：无法在反应中读取未定义（读取“名称”）的属性数据并非来自产品。我现在正在学习反应，这是我的第一个项目，所以请你帮忙解决这个问题。

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

App.js

import React from "react";
import Products from "./Components/Products/Products";

const App = () => {
  return (
    <div>
      <Products />
    </div>
  );
};

export default App;

Products.jsx

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

const products = [
  {
    id: 1,
    name: "Macbook Air",
    description: "Apple Macbook Air",
    price: "$999",
  },
  {
    id: 2,
    name: "Macbook Pro",
    description: "Apple Macbook Pro",
    price: "$1199",
  },
];

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 />
          </Grid>
        ))}
      </Grid>
    </main>
  );
};

export default Products;

产品.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 variant="h5" gutterBottom>
            {product.name}
          </Typography>
          <Typography variant="h5">{product.price}</Typography>
        </div>
        <Typography variant="h2" color="textSecondary">
          {product.description}
        </Typography>
      </CardContent>
      <CardActions disableSpacing className={classes.cardActions}>
        <IconButton aria-label="Add to cart">
          <AddShoppingCart />
        </IconButton>
      </CardActions>
    </Card>
  );
};

export default Product;

我该如何解决上述问题供参考，请找到所附图片

【问题讨论】：

您在控制台中的错误显示为products.name（复数），但您共享的代码是product（单数）。哪一个是正确的？

标签： reactjs react-native react-redux react-hooks react-router

【解决方案1】：

您没有将product 属性传递给您的<Product/> 组件，因此默认情况下它是undefined，然后您在未定义属性的Product 组件中引用了属性name，因此你得到了错误。

进行以下更改

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>
  );
};

【讨论】：

【解决方案2】：

您似乎没有将 product 作为道具传递给您的 <Product /> 组件。

将此添加到您的地图中：

{products.map((product) => (
    <Grid item key={product.id} xs={12} sm={6} md={4} lg={3}>
       <Product product={product}/>
    </Grid>
))}

【讨论】：