一秒钟后反应组件在heroku上消失

Posted 2023-03-07

【中文标题】一秒钟后反应组件在heroku上消失

【英文标题】：react component disappears on heroku after a second

【发布时间】：2021-05-01 06:26:45

【问题描述】：

我的网站是https://swiftdeskph.herokuapp.com/ 当您访问我的网站时，它会显示该组件一秒钟然后它是空的

我的观察/问题：

访问任何未指定的路由都可以显示我的 Error404 组件。 即使我的 api 调用出现错误，它也应该返回并在组件中显示错误。这是我的开发服务器上发生的事情。 heroku 日志没有错误 如果我重写我的 server.js 并放

app.get("/", (req, res) => 

    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  );

整个应用运行良好，但只有从“/”路径开始访问时才能运行。

App.js

import React,  useEffect  from "react";
import  useDispatch  from "react-redux";
import "./sass/App.scss";
import "bootstrap/dist/css/bootstrap.min.css";
import  Route, BrowserRouter as Router, Switch  from "react-router-dom";

// COMPONENTS---------------------------------------
import Navbar from "./components/NavbarComponent";
import Footer from "./components/Footer";
import Dashboard from "./components/Dashboard/Dashboard";
import  Orders  from "./components/Orders/Orders";
import UserInventory from "./components/UserInventory/UserInventory";
import Error404 from "./components/Error404";

//Import fetch actions
import  fetchProducts  from "./redux/userInventory/inventoryActions";
import  fetchOrder  from "./redux/order/orderActions";

function App() 
  const dispatch = useDispatch();

  useEffect(() => 
    dispatch(fetchOrder());
    dispatch(fetchProducts());
  , []);

  return (
    <React.Fragment>
      <Router>
        <Navbar />
        <div className="appContainer">
          <Switch>
            <Route path="/" exact component=Dashboard />
            <Route path="/orders" component=Orders />
            <Route path="/inventory" component=UserInventory />
            <Route path="*" component=Error404 />
          </Switch>
        </div>
      </Router>
      <Footer />
    </React.Fragment>
  );


export default App;

server.js

const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
require("dotenv").config();

const app = express();
const PORT = process.env.PORT || 80;
const  MONGO_URI  = require("./config/keys");
const connection = mongoose.connection;

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

mongoose.connect(MONGO_URI, 
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
  useFindAndModify: false,
);

connection.once("open", () => 
  console.log("MongoDB database connection established successfully.");
);

if (process.env.NODE_ENV == "production") 
  app.use(express.static("client/build"));

  const path = require("path");
  app.get("*", (req, res) => 
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  );


//ADDING OF ROUTES
const products = require("./routes/products");
const userInventory = require("./routes/userInventory");
const transactions = require(".//routes/transactions");
app.use("/api/products", products);
app.use("/api/user/inventory", userInventory);
app.use("/api/transactions", transactions);

app.listen(PORT, () => 
  console.log(`Server is running on port: $PORT`);
);

【参考方案1】：

问题修复。由于问题与路线冲突，我只是手动编码路线。

if (process.env.NODE_ENV == "production") 
  app.use(express.static("client/build"));

  const path = require("path");
  app.get("/", (req, res) => 
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  );
  app.get("/orders", (req, res) => 
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  );
  app.get("/inventory", (req, res) => 
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  );

【参考方案2】：

如果你看看你的控制台，你就会明白

看起来您正在对订单调用 map，其中 orders 不是数组。它可能是 null/undefined/object/value 类型。

查看 DashboardOrders.jsx

【讨论】：

我将添加一个条件来映射只有当它具有价值时，看看它是如何工作的。这很奇怪，因为我的状态有一个默认值，它是空数组。同样，如果我在 server.js 中使用 app.get("/", (req, res) =>，整个想法都有效

还是同样的问题。 imgur.com/a/T1h4VI9

第一个 api 调用是什么？ https://swiftdeskph.herokuapp.com/api/transactions ?

我删除了库存中的所有内容，并且正在显示。我认为这表明问题出在 api 调用中。在 app.js 中有 2 个 api 调用来获取订单和库存。

my /inventory 仅使用库存状态。我注释掉了关于订单的任何内容，看看它是否会在只有 1 个 api 请求时起作用