我收到错误“TypeError：products.map 不是函数”

Question

This error is appears in the Home page of the website. When I'm in another page and click the back button to open the Home Page this error appears. But when I'm refreshing the Home page, this error despairs. This is the Code that I used in home page

        import React, { useState, useEffect } from 'react';
        import { Link } from 'react-router-dom'
        import axios from 'axios';
        import { useSelector, useDispatch } from 'react-redux';
        import { listProducts } from '../actions/productActions';

        function HomeScreen(props) { 
            const productList = useSelector(state => state.productList);
            const { products, loading, error } = productList;
            const dispatch = useDispatch();
            
            useEffect(() => {
                dispatch(listProducts());
                return () =>{
                    //
                };
            }, []) 

            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="products-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} Stars ({product.numReivews}Reviews)</div>
                    </div>
                </li>) 
            }
                    
            </ul>
        
        }
        export default HomeScreen;

Answer 1

The main reason behind is .map() can be used only on arrays. You can use null or undefined checks before using .map() as:

<ul className="products"> 
  {
     products && products.map(product =>
        <li key={product._id}>
           { /* rest of the code */ }
        </li>) 
  }
</ul>

+1 suggestion:

Also it is worth to check the type of productList is in the store, maybe initially it's an empty object. Although clearly it has to be an array to iterate through on it with .map() . Thus I would use an empty array as [] or null .