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

Question

When I try to run this code it gives me this error:

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

Why does it happen? How can I make it work?

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

I had the same error and solved it by first asking if the array existed.

Example:

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

Answer 2

There is a property "products" in your component. That variable has higher priority than the map you have outside, and your .map is using it. I would recommend to rename one of them, to avoid variables with the same name.

Given the error, I would guess that that property wasn't passed to the component.

Also, the parameter of the map lambda is "products" too. Change it to "product", or it will fail.

Answer 3

The properties, products , that you're passing to your component ( Products ) are undefined. The Map method is taking in account the products that you have passed as properties is not the one that you have created outside the component itself.

If you want to map out the products array that you created outside of your components then just change its name as the array has the same name as the properties passed. If you want to use the products (from the property) then make sure that you're passing the properties in the component.

Answer 4

It's because you have taken the array "products" and the map item "products" by the same name. Change the map item to something else like "product":

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 5

Make sure to pass the products properties into the Product component. Change this:

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

to this:

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

Why? Because you're mapping an object ( products ) into a JSX element in your case which is the <Product/> component, so using { product.id } you're trying map an undefined object. Then make sure the products property you're trying to map out, is correctly passed into the parent component using the Products component.

Answer 6

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

Answer 7

at first please check that is products exported if yes then

change

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

to

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

because here you map products as products so you have to set key like products.id

Answer 8

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

Answer 9

您可以像这样替换地图部分： {(products|| []).map(product) => ( //your code ))}

Answer 10

Make sure properties is not undefined.

typeof products.map() !== undefined

Answer 11

 //Just use {products && products.map((products) => ( <Grid item key={product.id} item xs={12} sm={6} md={4} lg={3}> <Product /> </Grid> ))}; // add "products &&" before the map method

Answer 12

Use:

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>
  );
};

Just add " products && ". This will check if the map is defined or not.

Answer 13

Sometimes, It gives an error when you haven't used the variable of useState. and I have made 2 other components. 1) Tour 2) Tours

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

Now, I have used this tours variable in App.js file using Tours components.

App.js

I have used tours in App.js file.

App.js

Now, I'm taking tours variable for using .map() function in Tours.js file.

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

Tours.js

You have to check that both files have same spelling otherwise It gives an error and also doen't work UI of that particular file.

Thanks for reading.

Answer 14

you should try this :

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

Answer 15

step 1 : Add loading into user page use useState

{const [loading, setLoading] = useState(true);}

step 2 : set loading value to false at the end of async fetch function if your using try catch method this code line put inside the try method

  {   setLoading(false)}

step 3 : use a unary operation in the inside the render() part of the code

 {   loading ? (
  <h2>loading</h2>
) :   {/* `enter code here */}}

Answer 16

you had this kind of error because you don't pass any information(props) inside the product component.so try this:

 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 product={product} />
          </Grid>
        ))};
      </Grid>
    </main>
  );
};

Answer 17

you should basically check the values received is undefined or not .

In angular, you can use something like this {{person?.name}}

Answer 18

Write it in this way and issue would be resolved

<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>

Answer 19

You are getting blank array[] for this you are facing this error. You can solved this problem two ways:

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

or

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

Answer 20

  <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>

here changes in products && products.map() instead of products.map()

Answer 21

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

This would fix the issue but why does it appear well behind the scene react won't update the state immediately this concept is called scheduling that why when you products.map products are an empty array.

Answer 22

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>
  );
};

Answer 23

Check INITIAL_STATE in the reducer.

You must specify an array in the ID object you are calling in the reducer.

Example:

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>
    )
})