我在使用简单的标准模板获取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 (

);

}

}

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 (

xType="ordinal"

width={1000}

height={500}>

data={dataArr}

style={{stroke: 'violet', strokeWidth: 3}}/>

);

}

export default Chart;

真的无法弄清楚我哪里出错了 . 我用 results: response.MRData 正确设置了状态不是吗？ (MRData是JSON的关键 . )这是json的结构 . API链接：http://ergast.com/api/f1/2016/1/results.json

JSON Example Response

{

"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"

},

}

},

.

.

.

]

}

]

}

}

}