使用 create-react-app 获取 api 数据 [英] Fetch api data with create-react-app

问题描述

我是 reactjs 新手，我正在使用 create-react-app 开始，但我不明白如何进行 api 调用来获取数据.这是我的代码:

I'm new to reactjs, and I'm using create-react-app to get started, but I can't understand how make an api call to fetch data. Here is my code:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
// import { URL, KEY, city, countryCode } from './config.json';


const KEY = "d7ba7d7818dd3cec9ace78f9ad55722e";
const URL = "api.openweathermap.org/data/2.5";
const CITY = "Paris";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {}
    };
  }

  componentDidMount() {
    var url = `${URL}/weather?q=${CITY}&APPID=${KEY}&units=metric`;
    console.log(url);
    fetch(url).then(
      response => response.json()
    ).then(
      json => {
        console.log(json);
        this.setState({data: json});
      }
    );
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

render 方法只是 create-react-app 的默认渲染，我没有更改它.我只添加了构造函数和 componentDidMount 方法.我尝试从 OpenWeatherMap API 获取一些数据，将其添加到状态并将其记录到控制台.

The render method is just the default render from create-react-app, I didn't change it. I only added the constructor and componentDidMount methods. I try to fetch some data from the OpenWeatherMap API, add it to the state and log it to the console.

该请求在邮递员中完美运行，但在我的应用程序中引发了此错误:SyntaxError:JSON.parse:JSON 数据的第 1 行第 1 列出现意外字符

The request works perfectly in postman, but raises this Error in my app: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

谁能帮帮我?

推荐答案

在 URL 中包含协议以解决问题.获取请求的响应不成功，因此当您尝试将响应解析为 JSON 时，它会抛出异常，因为响应它不是有效的 JSON.

Include protocol with URL to resolve the problem. Response of fetch request is not success so when you try to parse response as JSON it throws exception because response it not valid JSON.

const KEY = "d7ba7d7818dd3cec9ace78f9ad55722e";
// Made change here
const URL = "https://api.openweathermap.org/data/2.5";
const CITY = "Paris";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {}
    };
  }

  componentDidMount() {
    var url = `${URL}/weather?q=${CITY}&APPID=${KEY}&units=metric`;
    console.log(url);
    fetch(url).then(
      response => response.json()
    ).then(
      json => {
        console.log(json);
        this.setState({data: json});
      }
    ).catch(error => console.log(error));
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('example'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="example"></div>

这篇关于使用 create-react-app 获取 api 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！