Question

此错误显示在网站的主页中。当我进入另一个页面并单击“后退”按钮以打开主页时，将出现此错误。但是，当我刷新主页时，此错误使您感到绝望。这是我在首页中使用的代码

        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

背后的主要原因是.map()仅可用于数组。您可以先使用null或undefined检查，然后再将.map()用作：

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

+1建议：

还值得检查productList的类型在商店中，也许最初是一个空对象。尽管很明显，它必须是一个数组，才能使用.map()对其进行迭代。因此，我将使用一个空数组作为[]或null。

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

1 个答案: