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

Question

当我尝试运行这段代码时，它给了我这个错误：

× 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

您的组件中有一个属性“产品”。该变量的优先级高于您在外面的地图，并且您的 .map 正在使用它。我建议重命名其中一个，以避免使用相同名称的变量。

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

另外，map lambda 的参数也是“products”。把它改成“产品”，否则会失败。

Answer 2

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

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

Answer 3

检查减速器中的 INITIAL_STATE。

你必须在你在 reducer 中调用的 ID 对象中指定一个数组。

例子：

const INTIAL_STATE = {
    products: [],
    product: { name: "", brand_name: "", prices: "", color: "", images: []},
    error: "",
}

product.images.map(img => {
    return(
        <div key = {img.id} className = "img-itemm">
            <img src = {img.image} alt = {img.image} />
        </div>
    )
})

Answer 4

确保将产品属性传递给 Product 组件。改变这个：

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

到这里：

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

为什么？因为您正在将一个对象（products）映射到一个 JSX 元素中，即 组件，所以使用 { product.id } 您正在尝试映射一个未定义的对象。 然后确保您尝试映射的 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

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

Answer 7

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

例子：

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

Answer 8

首先请检查是否是出口产品，如果是则

改变

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

到

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

因为在这里您将产品映射为产品，所以您必须设置像 products.id 这样的键

Answer 9

您已经用 products 命名了 map 方法的每个迭代，但您正在使用 product 来捕获迭代的每个实例。

Answer 10

有时，当您没有使用 useState 变量时，它会出错。 我还制作了另外两个组件。 1) 游览 2) 游览

 const [tours, setTours ] = useState([]);

现在，我使用 Tours 组件在 App.js 文件中使用了这个 tours 变量。

App.js

我在 App.js 文件中使用了 tours。

App.js

现在，我将使用 tours 变量在 Tours.js 文件中使用 .map() 函数。

const Tours = ({ tours }) => {
/...
{tours.map()
.../

Tours.js

您必须检查两个文件的拼写是否相同，否则会出错，并且该特定文件的 UI 也不起作用。

感谢阅读。