Fetch API работает на POSTMAN и express сервере, но не работает на React js - PullRequest
Новая
       6

Fetch API работает на POSTMAN и express сервере, но не работает на React js

1 голос
/ 21 января 2020

Я пытаюсь получить API, используя метод ax ios get. Это ссылка http://open-api.myhelsinki.fi/v1/events/?language_filter=en.

Мой бэкэнд Node js с 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}!`));

Пакет сервера. 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. json файл. Ps. Я пробовал настройки прокси в пакете. 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"
    ]
  }
}

Ответы [ 2 ]

1 голос
/ 21 января 2020

Ну, вы не отправляете ответ от внутреннего интерфейса к внешнему, вы просто печатаете его. На самом деле вам нужно вернуть ответ в интерфейс, например: 

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));
});
0 голосов
/ 21 января 2020 
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;
...