Fetch API 适用于 POSTMAN 和 express 服务器，但不适用于 React js

Question

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

我的后端是带有 Express 的 Node js，前端是 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));
});

Answer 2

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

const Events = () => {

 const [events, setEvents] = useState([]);

  useEffect(() => {
    fetchingData();
  }, []);

  const fetchingData = () => {
    axios
      .get("http://localhost:5000/events")
      .then(response => {

         console.log('response',response.data)

         setEvents(response.data.data)
       }) // you have array in your response.data so add your data here
      .catch(err => console.log(err));
  };

//do console.log
 console.log('events',events)

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

export default Events;