React 不会加载页面“您需要启用 JavaScript 才能运行此应用程序。”

Question

我正在阅读本教程https://learn.microsoft.com/en-us/learn/modules/build-web-api-minimal-spa/5-exercise-create-api

它一直有效，直到我到达这一步： 通过打开 package.json 和以下条目添加代理：

"proxy": "http://localhost:5000"   

现在，当我重新运行 yarn start 时，同一页面不会在 http://localhost:5000 上呈现，但如果我从 package.json 中删除该代理行，它仍会在 http://localhost:3000 上呈现。

我在控制台中看到这些错误：

manifest.json:1          GET http://localhost:5000/%PUBLIC_URL%/manifest.json 404 (Not Found)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
The attempt to bind "/%PUBLIC_URL%/manifest.json" in the workspace failed as this URI is malformed.

在 html 中我看到：

<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>

当我删除 package.json 中的代理条目时，我也会在 html 中得到这个：

<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
  <div class="App">
    <div>No pizzas</div>
  </div>
</div>

这是我的 package.json：

{
  "name": "pizza-web",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "styled-components": "^5.3.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "resolutions": {
    "styled-components": "^5"
  }
}

还有我的 Main.js：

import React, { useEffect, useState } from "react";
import styled from "styled-components";

const PizzaFrame = styled.div`
    border: solid 1px gray;
    padding: 10px;
    margin: 15px 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px grey;
    font-family: Arial;
`;

const Input = styled.input`
    border: solid 1px black;
    padding: 5px;
    border-radius: 3px;
`;

const Title = styled(Input)`
    text-transform: uppercase;
`;

const Save = styled.button`
   width: 100px;
   margin: 10px;
   background: green;
   color: white;
   font-size: 16px;
   padding: 10px;
   border-radius: 5px;
`;

const Pizza = ({ pizza }) => {
   const [data, setData] = useState(pizza);
   const [dirty, setDirty] = useState(false);

   function update(value, fieldName, obj) {
   setData({ ...obj, [fieldName] : value });
   setDirty(true);
   }

   function onSave() {
   setDirty(false);
   // make REST call
   }

   return (<React.Fragment>
     <PizzaFrame>
     <h3>
       <Title onChange={(evt) => update(evt.target.value, 'name', data)} value={data.name} /> 
     </h3>
     <div>
       <Input onChange={(evt) => update(evt.target.value, 'description', data)} value={data.description} />
     </div>
     {dirty ? 
      <div><Save onClick={onSave}>Save</Save></div> : null
     }
    </PizzaFrame>
    </React.Fragment>)
}

const Main = () => {
  const [pizzas, setPizzas] = useState([]);
  useEffect(() => {
    fetchData();
  }, [])

  function fetchData() {
    fetch("/api/pizza")
      .then(response => response.json())
      .then(data => setPizzas(data))
  }

  const data = pizzas.map(pizza => <Pizza pizza={pizza} />)

  return (<React.Fragment>
    {pizzas.length === 0 ?
    <div>No pizzas</div> :
    <div>{data}</div>
    }
  </React.Fragment>)
}

export default Main;

Answer 1

proxy 中的值意味着服务器，它应该提供反应应用程序正在获取的数据。因此，该服务器也需要启动（教程中的第 4 步）。

• localhost:3000 服务于 React 应用程序（前端）
• localhost:5000 服务后端（模拟服务器）

React开发工具提供了代理机制作为帮助。当设置了proxy 时，您可以通过不带主机名的 URL 调用它。即/api/pizza。

当您将后端 API 模拟与实际实现交换时，您需要将其更改为您服务运行的任何端口（教程中的 5059）。