错误：products.map 不是函数 Mern Stack

Question

我正在开发一个电子商务 mern 堆栈，一切正常，直到我决定在 heroku 上部署应用程序，之后我的 HomeScreen.js 中弹出了这个错误 --> 地图不是函数...但在尝试部署它之前，该应用程序运行良好，我在同时运行客户端和服务器以启动应用程序时没有遇到任何问题。

非常感谢任何提示或帮助。谢谢。

HomeScreen.js：

import "./HomeScreen.css";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

// Components
import Product from "../components/Product";

//Actions
import { getProducts as listProducts } from "../redux/actions/productActions";

const HomeScreen = () => {
  const dispatch = useDispatch();

  const getProducts = useSelector((state) => state.getProducts);
  const { products, loading, error } = getProducts;

  useEffect(() => {
    dispatch(listProducts());
  }, [dispatch]);
  

  return (
    <div className="homescreen">
      <h2 className="homescreen__title">Latest Products</h2>
      <div className="homescreen__products">
        {loading ? (
          <h2>Loading...</h2>
        ) : error ? (
          <h2>{error}</h2>
        ) : ( 
          products.map((product) => (.       <-- this where the error appears 
            <Product key={product._id}
              name={product.name}
              description={product.description}
              price={product.price}
              mageUrl={product.imageUrl}
              productId={product._id}
            />
          ))
        )}
      </div>
      
    </div>
  );
};

export default HomeScreen;

Product.js：

import "./Product.css";
import { Link } from "react-router-dom";

const Product = ({ imageUrl, description, price, name, productId }) => {
  return (
    <div className="product">
      <img src={imageUrl} alt={name} />

      <div className="product__info">
        <p className="info__name">{name}</p>

        <p className="info__description">{description.substring(0, 100)}...</p>

        <p className="info__price">${price}</p>

        <Link to={`/product/${productId}`} className="info__button">
          View
        </Link>
      </div>
    </div>
  );
};

export default Product;

ProductActions.js：

import * as actionTypes from "../constants/productConstants";
import axios from "axios";

export const getProducts = () => async (dispatch) => {
  try {
    dispatch({ type: actionTypes.GET_PRODUCTS_REQUEST });

    const { data } = await axios.get("/api/products");

    dispatch({
      type: actionTypes.GET_PRODUCTS_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: actionTypes.GET_PRODUCTS_FAIL,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    });
  }
};

export const getProductDetails = (id) => async (dispatch) => {
  try {
    dispatch({ type: actionTypes.GET_PRODUCT_DETAILS_REQUEST });

    const { data } = await axios.get(`/api/products/${id}`);

    dispatch({
      type: actionTypes.GET_PRODUCT_DETAILS_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: actionTypes.GET_PRODUCT_DETAILS_FAIL,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    });
  }
};

export const removeProductDetails = () => (dispatch) => {
  dispatch({ type: actionTypes.GET_PRODUCT_DETAILS_RESET });
};

server.js：

require("dotenv").config();
const path = require('path');
const express = require("express");
const productRoutes = require("./routes/productRoutes");
const connectDB = require("./config/db");


connectDB();

const app = express();

app.use(express.json());

//--------------- deployment -------

__dirname = path.resolve();
if(process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, '/frontend/build')));

  app.get('*',(req,res) => {
    res.sendFile(path.resolve(__dirname, 'frontend','build','index.html'))
  })
  
} else {
  app.get("/", (req, res) => {
    res.send("Api running");
  })
}


app.use("/api/products", productRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

.env:

PORT=5000

MONGO_URI=**********************

NODE_ENV=development

.env.local:

NODE_ENV=production  

PORT=5000

MONGO_URI=************

Answer 1

products.map((product) => (.

将此设置为Array.isArray(products) && products.map((product) 应该可以解决此问题，因为它只会在产品为数组时运行，否则该块将不会执行。

但是，它只会防止错误不显示。您仍然需要调试并检查未设置值的位置。

Answer 2

在这样的产品后面加问号 => products?.map(...)