Node.js FetchAPI在POSTMAN和express服务器上可用，但在React js上不可用

我正在尝试使用axiosget方法获取API。这是链接

我的后端是带有Express的Node js，前端是React js。当我运行Postman和Express server（它显示数据）时，它工作正常。但当我在React组件中渲染它时，它不会显示任何内容

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

这是我的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"
  }
}

这是我的反应组件。

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;

{
  "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"
    ]
  }
}

---

嗯，你不是从后端向前端发送响应，你只是在打印它。实际上，您需要将响应返回到前端，如下所示：

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));
});

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
常量事件=（）=>{
const[events，setEvents]=useState（[]）；
useffect（（）=>{
获取数据（）；
}, []);
常量获取数据=（）=>{
axios
.get（“http://localhost:5000/events")
。然后（响应=>{
console.log（'response'，response.data）
setEvents（response.data.data）
})//您的响应中有数组。请在此处添加数据
.catch（err=>console.log（err））；
};
//do console.log
console.log（'events'，events）
返回(
{events.map（列表=>{
返回
{list.id}
；
})}
);
};
导出默认事件；

后端日志中出现了什么错误？？？Hi@Jayce444修复了我的后端问题。我没有将响应发送到前端。但是我在react前端遇到了一个新问题，它说“GET 500（内部服务器错误）”.do console.log（）也在您的后端。因此，它将帮助您了解这里发生了什么catch（err=>{console.log（err）return res.status（500）.send（err）}）；让我知道你在你的登录端状态是200 ok。我没有得到任何错误。我想我从React设置中得到了错误。但是我不知道我做错了什么。@dam好吧，如果你得到500，那意味着

/events

路线中的

.catch

正在触发。把错误打印出来，看看失败的原因是什么；这段对话已经结束。

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;