型別錯誤：無法在React中讀取未定義（讀取“名稱”）的屬性-有解無憂

我收到以下錯誤型別錯誤：無法讀取反應資料中未定義的屬性（讀取“名稱”）不是來自產品。我現在正在學習反應，這是我的第一個專案，所以請您幫忙解決這個問題。

索引.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;

我如何解決上述問題供參考，請找到附件圖片型別錯誤：無法在 React 中讀取未定義（讀取“名稱”）的屬性

uj5u.com熱心網友回復：

您沒有將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>
  );
};

uj5u.com熱心網友回復：

看來您沒有將product當作道具傳遞給您的<Product />組件。

將此添加到您的地圖：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/334458.html

標籤：反应反应原生反应还原反应钩子反应路由器

上一篇：當欄位中存在值時，如何向輸入欄位添加驗證檢查？

下一篇：Javascript類實體方法不適用于反應中的onClick回呼事件