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"

},

}

},

.

.

.

]

}

]

}

}

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/559669.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java 串的顺序存储_算法入门之串的顺序存储表示

串,即字符串。计算机上的非数值处理的对象基本上是字符串数据。但是,由于现在我们使用的计算机硬件结构主要是反映数值计算的需要的,在处理字符串数据时比处理整数和浮点数要复杂的多。而且,对于不同类型程序,所处理的…

华为s2600t java_华为S2600T存储+华为RH2288H V3服务器

面对复杂多变的国际形势和国内艰巨繁重的改革发展稳定任务,维持稳定就显得格外重要。平安城市视频监控建设项目为了保证城市交通和城市治安的安全,需要对人员集中的重要场所和道路上监控进行建设和改造。视频监控记录的数据必须具有很高的安全性&#xf…

华为java8_Java8 Stream

简单认识Java streamJava8出了一个stream流式编程,在开发中或多或少用到接触过。怎么说呢!举个例子把,一起我们在遍历一个集合的时候,我们是从外部去遍历的,然后才能拿到结果,这样来效率就会变得相对低一点…

c++ mysql 配置文件_C++操作数据库写入到json配置文件中

1. 这次加了对int和varchar的处理#include #include #include #include #include "json/json.h"#include #include using namespace std;int main(int argc, char* argv[]){MYSQL mysql;mysql_init( &mysql );mysql_real_connect(&mysql,"192.168.16.11…

求最长单调子序列java,单调减子序列(java实现)

题目:从一个由N个整数排列组成的整数序列中,自左向右不连续的选出一组整数,可以组成一个单调减小的子序列(如从{68 69 54 64 68 64 70 67 78 62 98 87}中我们可以选取出{69 68 64 62}这个子序列;当然,这里还有很多其他…

php输出12个月,php获取12个月内的开始时间和结束时间

$currentTime time();$cyear floor(date("Y",$currentTime));$cMonth floor(date("m",$currentTime));for($i0;$i<6;$i){$nMonth $cMonth-$i;$cyear $nMonth 0 ? ($cyear-1) : $cyear;$nMonth $nMonth < 0 ? 12$nMonth : $nMonth;$date $c…

java打开输入框,java – 在Android中打开输入对话框

我想在某个点打开一个输入对话框,我可以在其输入后存储和使用它.我在互联网上找到的所有例子都非常先进,我想它们并不像我想要的那样简单 – 我只需要类似于Java的东西&#xff1a;String name JOptionPane.showInputDialog("Enter your name");保留输入以供以后计算…

php 编译原理,编译原理

编译原理是计算机科学中历史最悠久&#xff0c;也是最高度发展的学科之一。编译器的设计与实现集中体现了计算机科学中的最核心的思想和技术&#xff0c;并且和计算机科学的其他研究领域&#xff0c;如形式语言与自动机、算法、数据结构、程序设计语言、计算机体系结构、软件工…

java俄文xml解析错误,XML解析出错处理

搜索热词正常解析完毕之后会直接走parserDidEndDocument这个方法解析出错之后会执行一个相应的方法&#xff0c;- (void)parser:(NSXMLParser*)parser parseErrorOccurred:(NSError*)parseError&#xff0c;执行完毕此方法后.会根据解析出错的地方去执行方法parserDidEndDocume…

JAVA中自己写的util中的chop,Java StringUtils.chop方法代碼示例

import org.apache.commons.lang3.StringUtils; //導入方法依賴的package包/類/*** Tutti i file dentro a /res vengono indicati come cacheabili lato browser per 1 anno (tramite lheader expires).* Per evitare che nuove versioni non vengano mai prese, si usa il &q…

ascii码扩展 php,php与ascii码

首先 简单说一下历史&#xff0c;ascii码最开始是美国人搞出来的&#xff0c;用来干什么呢&#xff1f;我们知道&#xff0c;计算机只知道0和1&#xff0c;如果我们要计算机识别除了01之外的字符&#xff0c;例如 a&#xff0c;我们要先告诉计算机‘1100001’就是a。跟摩斯密码…

php手机电子相册,免费电子相册制作软件 手机电子相册制作软件

照片配上音乐加上炫酷的过渡效果点缀图片和文字说明&#xff0c;轻松制作成各种视频格式的电子相册。不需要专业的视频制作知识&#xff0c;点几下鼠标就可以把上百张数码照片制作成电子相册。视频相册可以在电脑上用播放器收看或者在高清电视上播放。也可以刻录成DVD、VCD光盘…

windows上配置nginx php,Windows下配置Nginx使之支持PHP

1. 首先&#xff0c;将 nginx.conf 中的 PHP 配置注释去掉。01# pass the PHP scripts to FastCGI server listening on 127.0.0.1:900002#03#location ~ .php$ {04# root html;05# fastcgi_pass 127.0.0.1:9000;06# fastcgi_index index.php;07# fas…

php 系统环境变量引用,PHP 系统变量 环境变量

在PHP网站开发中&#xff0c;为了满足网站的需要&#xff0c;时常需要对PHP环境变量进行设置和应用&#xff0c;在虚拟主机环境下&#xff0c;有时我们更需要通过PHP环境变量操作函 数来对PHP环境变量值进行设置。为此我们有必要对PHP环境变量先有所熟悉。今天和大家分享PHP环境…

python dataframe分组求和,pandas datafram中按特定月份分组和求和值

这里有一个稍微不同的方法&#xff1a;使用year和month来构建索引&#xff0c;然后使用一个UDF groupby()。在示例数据&#xff1a;N 10years pd.date_range("1981", "2017", freq"A").yeardates np.random.choice(years, sizeN, replaceTrue…

matlab7.0 run,新手求救啊!!!matlab7.0在win7启动后命令窗口出现大段代码!

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼java.lang.NoClassDefFoundError: com/mathworks/beans/ExtraPropertyAttributesat java.lang.ClassLoader.defineClass0(Native Method)at java.lang.ClassLoader.defineClass(Unknown Source)at java.security.SecureClassLoader…

php+spl+栈,PHP SPL标准库之数据结构栈(SplStack)介绍

栈(Stack)是一种特殊的线性表&#xff0c;因为它只能在线性表的一端进行插入或删除元素(即进栈和出栈)SplStack就是继承双链表(SplDoublyLinkedList)实现栈。类摘要如下&#xff1a;简单使用如下&#xff1a;//把栈想象成一个颠倒的数组$stack new SplStack();/*** 可见栈和双…

深度理解java jvm,深度理解JVM

深入理解java虚拟机要讲的内容了解历史垃圾回收机制性能监控工具性能调优案例实战认识类的文件结构类加载机制字节码执行引擎虚拟机编译及运行时优化Java线程高级1. 环境搭建安装jdk2. 内存溢出场景模拟public class Test01 {public static void main(String[] args) {//测试内…

php用json_encode编码后乱码,php json_encode()函数中文编码乱码解决方法_PHP教程

在我使用php json_encode()时&#xff0c;如果是英文或数字没一点问题&#xff0c;但是用到中文是居然出现不可识别的中文乱码了&#xff0c;下面看我解决json_encode中文乱码方法。在网上找到一种解决方法&#xff1a;代码如下复制代码后来请教了别人&#xff0c;还可以用base…