React内部useEffect中使用fetch的问题

Posted 2021-03-19

我是node和react的新手，我正在尝试获取一些数据并将其显示在我的react页面上。很简单我有一个运行在localhost：3001上的快递服务器，我的react应用程序在localhost：3000上。我试图获取数据，然后通过挂钩将数据设置为一种状态。我似乎无法在react页面或Web开发人员控制台中获取数据。有什么方法可以查看在控制台中获取的数据吗？

这是我的React组件：

import React, { useState } from "react";


function App() {

  const [weatherData, setWeatherData] = useState("");
  console.log(weatherData);

  React.useEffect(() => {
    const fetchData = async () => {
      const result = await fetch(
        "http://localhost:3001"
      );
      const data = await result.json();
      console.log("data", data);


      setWeatherData(data);
    };

    fetchData();
  })

  return (
    <div>
      <h1>The temprature is {weatherData}</h1>
    </div>
  );
}

export default App;

这是我的节点服务器：

const express = require('express');
const bodyParser = require('body-parser');
const https = require("https");
const cors = require('cors');

const app = express();

app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'jsx')


app.use(express.static("public"));

app.get("/", function (req, res) {
  const query = Chicago;


  const apiKey = "a valid key";
  const unit = "imperial";
  const url = "https://api.openweathermap.org/data/2.5/weather?appid=" + apiKey + "&q=" + query + "&units=" + unit;


  https.get(url, (response) => {
    console.log("statusCode", res.statusCode);

    response.on("data", (d) => {
      const weatherData = (JSON.parse(d));
      console.log(weatherData);
      res.send(weatherData);

    });
  }).on("error", (e) => {
    console.error(e);
  })
});

const port = process.env.PORT || 3001;

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

我得到的结果是没有数据，并且在chrome开发工具控制台中出现了这2个错误。

index.js：1未捕获的语法错误：意外令牌'

App.jsx：19未捕获（在承诺中）SyntaxError：意外令牌

任何帮助将不胜感激！

答案

似乎在result.json（）中可能发生错误。

可能是请求返回html，而不是json。

您可以使用邮递员或其他工具通过'localhost：3001'获得真正的响应，以清除错误所在。

另一答案

您需要指定从服务器返回的数据的Content-Type。

您可以在发送响应之前使用res.setHeader，也可以使用res.json()发送json响应

https.get(url, (response) => {
    console.log("statusCode", res.statusCode);

    response.on("data", (d) => {
      const weatherData = JSON.parse(d);
      console.log(weatherData);
      res.json(weatherData); // use json response

    });
  }).on("error", (e) => {
    console.error(e);
  })