时间戳

首页 > 解决方案 > TypeError：无法在 React 中读取未定义的属性（读取“名称”）

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

问题描述

我收到以下错误 TypeError: Cannot read properties of undefined (reading 'name') in react 数据不是来自产品。我现在正在学习反应，这是我的第一个项目，所以请你帮忙解决这个问题。

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

应用程序.js

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

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

export default App;

产品.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;

我该如何解决上述问题供参考，请找到附图 在此处输入图像描述

标签： reactjsreact-nativereact-reduxreact-hooksreact-router

解决方案

您没有将product道具传递给您的<Product/>组件，因此undefined默认情况下，然后您在未定义道具name的Product组件中引用该属性，因此您收到错误消息。

进行以下更改

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

推荐阅读