Question

× TypeError：无法读取未定义的属性（读取‘map’）

2021-09-06

758555

reactjs material-ui

当我尝试运行此代码时，它给出了此错误：

× TypeError: Cannot read properties of undefined (reading 'map')

为什么会发生这种情况？我该如何让它正常工作？

import React from 'react';
import Grid from '@material-ui/core/Grid';

import Product from './Product/Product';
import useStyles from './styles';

const products = [
  {id: 1, name: 'Shoes', description: 'Running Shoes.' },
  {id: 2, name: 'MacBook', description: 'Apple MacBook.' },
];

const Products = ({ products }) => {
  const classes = useStyles();

  return (
    <main className={classes.content}>
      <div className={classes.toolbar} />
      <Grid container justify="center" spacing={4}>
        {products.map((products) => (
          <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}>
            <Product />
          </Grid>
        ))};
      </Grid>
    </main>
  );
};

export default Products;

Answer 1

我遇到了同样的错误，并通过首先询问数组是否存在解决了该错误。

示例：

<Filter>
  { product.color?.map((c) => (
    <FilterColor color = {c} key = {c} />
  ))};
</Filter>

Answer 2

您的组件中有一个属性“products”。该变量的优先级高于您外部的映射，并且您的 .map 正在使用它。我建议重命名其中一个，以避免使用同名变量。

鉴于错误，我猜测该属性未传递给组件。

此外，map lambda 的参数也是“products”。将其更改为“product”，否则将失败。

Answer 3

您获取了一个空白数组[]。因此，您面临此错误。您可以通过两种方式解决此问题：

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

或

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