Блог

У меня ошибка TypeError: e.map is not a function при развертывании в heroku:

Вот мои продукты.jsx:

     import React, { useEffect, useState } from "react";
    import axios from "axios";
    import styled from "styled-components";
    import media from "../../Styles/media";
    import TopProducts from "./TopProducts";
    import Pagination from "../Pagination";
    
    const Wrapper = styled.div`
      margin: 50px 0;
      ${media.tablet`
      margin: 10px 0;
      `};
    `;
    
    const Tops = (props) => {
      const [loading, setLoading] = useState(false);
      const [currentPage, setCurrentPage] = useState(1);
      const [itemsPerPage] = useState(9);
    
      const [products, setProducts] = useState([]);
      useEffect(() => {
        const fetchItems = async () => {
          setLoading(true);
          const res = await axios.get("/api/products");
          setProducts(res.data);
          setLoading(false);
        };
        document.title = `Shop - The Beuter`;
        fetchItems();
      }, [props]);
    
...
    
    export default Tops;
  

Это говорит мне, at cc (Products.jsx:82) что это за строка {products.map((product, i) => (...)

Как я могу исправить эту ошибку? Когда я пытаюсь использовать свой localhost, он работает нормально и без ошибок

Обновить функцию add .map:

 return (
    <ShopWrapper>
        <ListItems>
            {products.map((product, i) => (
                <Item key={i}>
                    <ItemLink to={`/product/${product.title_url}`}>
                        <ItemImage src={product.img_url1} />
                        <ItemTitle> {product.title} </ItemTitle>
                        <ItemPrice>
                            {nf.format(product.price)}
                            vnd
                        </ItemPrice>
                    </ItemLink>
                </Item>
            ))}
        </ListItems>
    </ShopWrapper>
);
  

Это вызывает ошибку при products.map

Обновленный код из серверной части: вот мой server.js из серверной части:

 const express = require("express"),
    app = express(),
    cors = require("cors"),
    port = process.env.PORT || 8000,
    db = "beuter",
    path = require("path"),
    server = app.listen(port, () => console.log(`Listening to on port ${port}`));

app.use(cors());
app.use(express.json());

if (process.env.NODE_ENV === "production") {
    app.use(express.static('beuter/build'))

    app.get('*', (req, res) => {
        res.sendFile(path.resolve(__dirname, 'beuter', 'build', 'index.html'));
    })
}
require("./server/config/database.config")(db);
require("./server/routes/product.route")(app);
  

Вот мой проект на github, если вы хотите просмотреть его:
https://github.com/nathannewyen/the-beuter

Я действительно ценю это

обновите мой route.js:

 const product = require("../controllers/product.controller");

module.exports = (app) => {

    app.get("/api/products", product.index);

    // Create a product
    app.post("/api/products", product.create);

    // Get one product by title_url
    app.get("/api/products/:title_url", product.show_title_url)

    // Delete a product
    app.delete("/api/products/:id", product.deleteProduct)

    //Edit a product
    app.put("/api/products/:id", product.update)

};
  

Порядок имеет значение при регистрации маршрутов.

Вы запрашиваете, /api/products и оно сопоставляется app.get('*', .

app.get("/api/products" никогда не проверяется.

Ставьте подстановочные маршруты последними.