× TypeError: Cannot read property 'map' of undefined

[brijesh1488]

HomeScreen D:/React/Amazona/frontend/src/Screens/HomeScreen.js:25 22 | 23 | return loading ?

Loading...

: 24 | error ?

{error}

:

25 | <ul className="products"> | ^ 26 | { 27 | products.map(product => 28 |

View compiled ▶ 22 stack frames were collapsed. (anonymous function) D:/React/Amazona/frontend/src/actions/productActions.js:9 6 | { 7 | dispatch({type: PRODUCT_LIST_REQUEST}); 8 | const { data } = await axios.get("/api/products"); 9 | dispatch({ type: PRODUCT_LIST_SUCCESS, payroll: data }); 10 | } 11 | 12 | catch(error){

HomeScreen.js import React, { useEffect } from 'react'; import { Link} from 'react-router-dom'; // import data from '../data';

import {useSelector, useDispatch} from 'react-redux'; import { listProducts } from '../actions/productActions';

const HomeScreen=(props)=>{

// const [products, setProducts]=useState([]); const productList = useSelector(state => state.productList); const { products, loading, error } = productList; const dispatch = useDispatch(); useEffect(() => { dispatch(listProducts());

return () => {
  //
};

}, [dispatch])

return loading ? <div>Loading...</div> :
error ? <div>{error}</div> :
<ul className="products">
{
  products.map(product =>
  <li key={product._id}>
    <div className="product">
    <Link to={'/product/' + product._id}><img className="product-image" src={product.image} alt="product" /></Link>
  <div className="product-name" >
      
      <Link to={'/product/' + product._id}>{product.name}</Link>
      </div> 
  <div className="product-brand" >{product.brand}</div> 
  <div className="product-price" >Rs.{product.price}</div>  
  <div className="product-rating" >{product.rating} Star ({product.numReviews})</div>        
</div>

) } } export default HomeScreen;

productActions.js

import { PRODUCT_LIST_REQUEST, PRODUCT_LIST_FAIL, PRODUCT_LIST_SUCCESS } from "../constants/productConstants" import axios from "axios";

const listProducts = () => async(dispatch) => { try { dispatch({type: PRODUCT_LIST_REQUEST}); const { data } = await axios.get("/api/products"); dispatch({ type: PRODUCT_LIST_SUCCESS, payroll: data }); }

catch(error){ dispatch({type:PRODUCT_LIST_FAIL,payroll:error.message}); }

}

export { listProducts };

productReducers.js import { PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS, PRODUCT_LIST_FAIL } from "../constants/productConstants";

function productListReducer(state ={ products: [] }, action){ switch(action.type){ case PRODUCT_LIST_REQUEST: return{loading:true}; case PRODUCT_LIST_SUCCESS: return { loading: false, products: action.payload }; case PRODUCT_LIST_FAIL: return { loading: false, error: action.payload } default: return state;

}

} export{productListReducer};

[brijesh1488]

Plz help me i am stuck there

[basir]

It means that products is null. check the value of products when loading = true, It should be empty array [] Also, check the value of products when loading = false, It should be products array. If you are using redux, make sure that in the reducer you set the default value for products to an empty array.

function productListReducer(state = { products: [] }, action) {
...
}

[basir]

check this: https://gist.github.com/basir/d121df24c47861e13a1cdcbed1cca902#typeerror-cannot-read-property-map-of-undefined-homescreen