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

Question

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

\n

\n

\xc3\x97 TypeError：无法读取未定义的属性（读取“map”）

\n

\n

为什么会发生这种情况？我怎样才能让它发挥作用？

\n

import React from \'react\';\nimport Grid from \'@material-ui/core/Grid\';\n\nimport Product from \'./Product/Product\';\nimport useStyles from \'./styles\';\n\nconst products = [\n  {id: 1, name: \'Shoes\', description: \'Running Shoes.\' },\n  {id: 2, name: \'MacBook\', description: \'Apple MacBook.\' },\n];\n\nconst Products = ({ products }) => {\n  const classes = useStyles();\n\n  return (\n    <main className={classes.content}>\n      <div className={classes.toolbar} />\n      <Grid container justify="center" spacing={4}>\n        {products.map((products) => (\n          <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}>\n            <Product />\n          </Grid>\n        ))};\n      </Grid>\n    </main>\n  );\n};\n\nexport default Products;\n

\n

Answer 1

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

例子：

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

Answer 2

您的组件中有一个属性“产品”。该变量比您外部的地图具有更高的优先级，并且您.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>
))};

Answer 4

products您传递给组件 ( ) 的属性Products未定义。Map方法考虑到您作为属性传递的属性不是您在组件本身之外创建的属性。products

如果您想映射在products组件外部创建的数组，则只需更改其名称，因为该数组与传递的属性具有相同的名称。如果您想使用products（来自属性），请确保您在组件中传递属性。

Answer 5

这是因为您使用了相同名称的数组“products”和地图项“products”。将地图项更改为其他内容，例如“产品”：

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((product) => (
          <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}>
            <Product/>
          </Grid>
        ))};
      </Grid>
    </main>
  );
};

Answer 6

使用：

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

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

只需添加“ products &&”即可。这将检查地图是否已定义。