&#215；TypeError：无法读取未定义的属性(正在读取&#39；map&#39；)

问题描述

当我尝试运行此代码时，出现以下错误：

×TypeError：无法读取未定义的属性(读取‘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;

推荐答案

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

示例：

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