Question

我在使用简单的标准模板来获取API数据的React应用程序中从API提取数据时遇到了困难。控制台日志返回的结果是空白数组。

import React, {Component} from 'react';
import './App.css';
import Chart from './components/chart'

const API_URL = "http://ergast.com/api/f1/2016/1/results.json";

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            results: [],
        };
    }

    componentDidMount() {
        fetch(API_URL)
            .then(response => {
                if (response.ok) {
                    return  response.json()
                }
                else {
                    throw new Error ('something went wrong')
                }
            })
            .then(response => this.setState({
                results: response.MRData
                })
            )}

    render() {
        const {results} = this.state;
        return (
            <div className="App">
                <Chart data={results}/>
            </div>
        );
    }
}

export default App;

chart.js

import React from 'react';
import {XYPlot, XAxis, YAxis, VerticalGridLines, HorizontalGridLines, LineSeries} from 'react-vis';

const Chart = (props) => {

    console.log(props.data);

    const dataArr = props.data.map((d)=> {
        return {x: d.RaceTable.Results.Driver.driverId, y: d.RaceTable.Results.position}
    });
    console.log(dataArr);
    return (
        <XYPlot
            xType="ordinal"
            width={1000}
            height={500}>
            <VerticalGridLines />
            <HorizontalGridLines />
            <XAxis title="Driver" />
            <YAxis title="Race Finish Position" />
                <LineSeries
                    data={dataArr}
                    style={{stroke: 'violet', strokeWidth: 3}}/>
        </XYPlot>
    );
}

export default Chart;

真的无法弄清楚我哪里出了问题。我已经用results: response.MRData正确设置了状态，不是吗？（MRData是JSON的键。）这是json的结构。 API链接：http://ergast.com/api/f1/2016/1/results.json

JSON示例响应

{
  "MRData": {
    "xmlns": "http://ergast.com/mrd/1.0",
    "RaceTable": {
      "Races": [
          {
          "season": "2008",
          "round": "1",
            }
          },
          "Results": [
            {
              "position": "1",
              "Driver": {
                "driverId": "hamilton",
                "permanentNumber": "44",
                "code": "HAM",
                "url": "http://en.wikipedia.org/wiki/Lewis_Hamilton",
                "givenName": "Lewis",
                "familyName": "Hamilton",
                "dateOfBirth": "1985-01-07",
                "nationality": "British"
              },
              }
            },
            .
            .
            .
          ]
        }
      ]
    }
  }
}

ReactJS：从API获取数据

0 个答案: