javascript
Java 接受reactjs数据_ReactJS：从API获取数据
我在使用簡單的標準模板獲取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"
},
}
},
.
.
.
]
}
]
}
}
}
總結
以上是生活随笔為你收集整理的Java 接受reactjs数据_ReactJS：从API获取数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python 初始化一个4维向量_看图学
- 下一篇： java 获取内存大小_JVM面试题扩展