个人中心
gpt4 book ai didi

javascript - Heroku React App 显示数据库的 json 而不是 UI？

转载 作者：行者123 更新时间：2023-12-01 00:53:01 24 4
gpt4 key购买 nike

我在 Heroku 上部署了一个 React 应用程序，它在构建中没有显示任何错误，并且“heroku log”命令也没有显示任何错误，但我的页面显示了 mongo 数据库的 json 而不是 UI使用 CSS 和 React 组件。

该网站在本地运行完美。另外，我尝试了 Heroku 页面中的故障排除指南，包括在 package.json 中指定正确的 npm + node 版本以及将 node_modules 添加到 .gitignore。

页面 html

<html>
  <head></head>
  <body>
    <pre style="word-wrap: break-word; white-space: pre-wrap;">==$0
      "[{"items":[{"_id":"5c73504f75c5630017b5fba0","task":"TODO 
      1","done":true,"__v":0},{"_id":"5c73514875c5630017b5fba3","task":"TODO 
      2","done":false,"__v":2}]}]"
    </pre>
  </body>
</html>

页面控制台错误

Uncaught (in promise) TypeError: Cannot read property 'honeyTipsAutopopOn' of undefined
    at h1-main.js:formatted:1478
    at k (h1-vendors-honeypay-main-popover.js:1)
    at Generator._invoke (h1-vendors-honeypay-main-popover.js:1)
    at Generator.e.<computed> [as next] (h1-vendors-honeypay-main-popover.js:1)
    at r (h1-main.js:formatted:1501)
    at h1-main.js:formatted:1508

package.json

{
  "name": "todolist",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "concurrently": "^4.1.0",
    "express": "^4.16.4",
    "mongoose": "^5.4.14",
    "node": "^10.16.0",
    "npm": "^6.9.0"
  },
  "devDependencies": {},
  "scripts": {
    "client-install": "npm install --prefix client",
    "start": "node app.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run start\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix 
    client && npm run build --prefix client"
  },

app.js

const express = require("express");
const mongoose = require("mongoose");
mongoose.set("useFindAndModify", false);
const bodyParser = require("body-parser");
const items = require("./routes/api/itemRoutes");
const path = require("path");

const app = express();
app.use(bodyParser.json());
//mongoose.connect("mongodb://localhost/todolist", {useNewUrlParser: true});
mongoose.connect("...", {useNewUrlParser: true});
let port = process.env.PORT || 4000;
app.use("/", items);

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

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

app.listen(port, () => {console.log("Server started on port " + port);});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>BriansTodos</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

我应该尝试解决这个问题吗？还有其他解决方案吗？谢谢。

最佳答案

对于任何看到此问题的人，不确定问题是否已解决。

我也遇到了同样的问题，没有任何控制台错误，但是问题是我的 Express 服务器中有一条路由，其名称与我的 React 应用程序中的路由相同。因此，它没有返回 React 路由，而是返回 Express 路由中的数据。

尝试看看是否有任何可能冲突的路线名称？

关于javascript - Heroku React App 显示数据库的 json 而不是 UI？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56818077/

24 4 0
文章推荐： angularjs - 可以将整个服务绑定(bind)到 Controller 范围吗？
文章推荐： jquery - 如果我将 "on"与 jQuery 一起使用，我是否需要将此函数包含在准备好的文档中？
文章推荐： file - Powershell 将文件从多个子文件夹复制到单个文件夹，忽略重复项
文章推荐： jQuery延迟函数中断
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com