无法读取 React 中未定义的属性(读取"映射")

Question

我正在尝试使用commerce.js库创建一个电子商务网站。我已经有8个产品在库API。我有一个Products.js组件，在那里我传递从App.js得到的产品对象数组，并再次将单个产品对象传递给Product.js组件。为此，我使用映射函数将每个对象作为道具传递给Product.js组件。我收到这个错误。我试着注释掉映射块，只有控制台记录了App.js中的products变量和Products.js中的道具products，我得到了所有的8个产品，所以没有问题。但我不明白为什么在映射函数中会出现这个错误。

App.js

import React, { useState, useEffect } from "react";
import { commerce } from "./lib/commerce";
import { Products, Navbar } from "./components";
function App() {
const [products, setProducts] = useState([]);
const fetchProduct = async () => {
const data = await commerce.products.list();
setProducts(data);
};
useEffect(() => {
fetchProduct();
}, []);
console.log("products", products);
return (
<div className="App">
<Navbar />
<Products products={products} />
</div>
);
}
export default App;

Products.js

import React from "react";
import { Grid } from "@material-ui/core";
import Product from "./Product/Product";
import useStyles from "./style";
const Products = ({ products }) => {
const classes = useStyles();
return (
<main className={classes.content}>
<div className={classes.toolbar} />
<Grid container justifyContent="center" spacing={4}>
{products.data.map((product) => (
<Grid item key={product.id} xs={12} sm={6} md={4} lg={3}>
<Product product={product} />
</Grid>
))}
</Grid>
</main>
);
};
export default Products;

产品.js

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={product.media.source}
title={product.name}
/>
<CardContent>
<div className={classes.cardContent}>
<Typography variant="h5" gutterBottom>
{product.name}
</Typography>
<Typography variant="h5">
{product.price.formatted_with_symbol}
</Typography>
</div>
<Typography
variant="body2"
dangerouslySetInnerHTML={{ __html: product.description }}
/>
</CardContent>
<CardActions disableSpacing className={classes.cardActions}>
<IconButton aria-label="Add to Cart">
<AddShoppingCart />
</IconButton>
</CardActions>
</Card>
);
};
export default Product;

Answer 1

在App.js中更改fetchProduct函数如下：

const fetchProduct = async = {
const products = await commerce.products.list();
setProducts(products.data);
}

然后在Products.js映射中覆盖产品，而不是Products.data、

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

解释：
products的初始State是一个空数组，它会传递给products组件，在那里您尝试了products.data.map()，但products(最初)是一个数组，数组上没有数据属性，所以它抛出了错误
有几种方法可以解决此问题，但如果您只使用响应中的产品数据，则可以使用上述方法，使用products数组而不是products对象映射products而不是products.data和setProducts()。

Answer 2

你能错误地附加屏幕吗？

我认为，你试图在加载之前读取数据，你可以通过添加这样的东西(products.data||[]).map来防止这种情况。。或在useState(｛data:[]｝)上更改App.js中的默认状态