node.js - Fetch API 在 POSTMAN 和 Express 服务器上工作，但在 React js 上不起作用

Question

我正在尝试使用 axios get 方法获取 API。这是链接http://open-api.myhelsinki.fi/v1/events/?language_filter=en 。

我的后端是 Node js with Express，前端是 React js。当我在 Postman 和 Express 服务器中运行时(它显示数据)，它工作正常。但是当我在 React 组件中渲染它时，它没有显示任何内容。

当我检查 React 组件的网络状态时，它显示待处理。我不知道我做错了什么，因为我没有收到任何错误。

这是我的 Express 服务器设置

const express = require("express");
const app = express();
const port = process.env.PORT || 5000;
const cors = require("cors");
const axios = require("axios");
app.use(cors());

app.get("/events", async (req, res, next) => {
  axios
    .get("http://open-api.myhelsinki.fi/v1/events/?language_filter=en")
    .then(response => console.log(response))
    .catch(err => console.log(err));
});

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

服务器的package.json文件

{
  "name": "myhelsinki",
  "version": "1.0.0",
  "description": "This is for educational purpose",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "server": "node server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "author": "alak",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.19.1",
    "concurrently": "^5.0.2",
    "cors": "^2.8.5",
    "express": "^4.17.1"
  }
}

这是我的 React 组件。

import React, { useEffect } from "react";
import axios from "axios";

const Events = () => {
  useEffect(() => {
    events();
  }, []);
  const [state, setstate] = React.useState([]);
  const events = () => {
    axios
      .get("http://localhost:5000/events")
      .then(res => res.json())
      .then(response => setstate(response.data))
      .catch(err => console.log(err));
  };

  return (
    <div>
      {state.map(list => {
        return <li>{list.id}</li>;
      })}
    </div>
  );
};

export default Events;

这是 React 的 package.json 文件。诗。我尝试过 package.json 中的代理设置，但效果不佳。

{
  "name": "myhelsinki",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

好吧，您没有将响应从后端发送到前端，您只是将其打印出来。您需要实际将响应返回到前端，如下所示:

app.get("/events", async (req, res, next) => {
  axios
    .get("http://open-api.myhelsinki.fi/v1/events/?language_filter=en")
    .then(response => res.send(response))
    .catch(err => res.status(500).send(err));
});