专栏首页编程微刊从零开始学习React-解析json、渲染数据(六)

从零开始学习React-解析json、渲染数据(六)

在上一节里面,从零开始学习React-axios获取服务器API接口(五)我们请求的api是一个天气的api,这一节是如何获取数据,进行解析,并且渲染到前端。

步骤

1:打印json数据,查看数据格式

为了方便查看,我把json数据放在了编辑器里面,对这个json进行解析。

{
    "code": 200,
    "msg": "成功!",
    "data": {
        "yesterday": {
            "date": "5日星期二",
            "high": "高温 21℃",
            "fx": "北风",
            "low": "低温 14℃",
            "fl": "\u003c![CDATA[\u003c3级]]\u003e",
            "type": "晴"
        },
        "city": "上海",
        "aqi": null,
        "forecast": [
            {
                "date": "6日星期三",
                "high": "高温 20℃",
                "fengli": "\u003c![CDATA[\u003c3级]]\u003e",
                "low": "低温 16℃",
                "fengxiang": "东北风",
                "type": "多云"
            },
            {
                "date": "7日星期四",
                "high": "高温 19℃",
                "fengli": "\u003c![CDATA[3-4级]]\u003e",
                "low": "低温 14℃",
                "fengxiang": "东北风",
                "type": "多云"
            },
            {
                "date": "8日星期五",
                "high": "高温 19℃",
                "fengli": "\u003c![CDATA[3-4级]]\u003e",
                "low": "低温 12℃",
                "fengxiang": "北风",
                "type": "多云"
            },
            {
                "date": "9日星期六",
                "high": "高温 19℃",
                "fengli": "\u003c![CDATA[\u003c3级]]\u003e",
                "low": "低温 13℃",
                "fengxiang": "东北风",
                "type": "晴"
            },
            {
                "date": "10日星期天",
                "high": "高温 22℃",
                "fengli": "\u003c![CDATA[3-4级]]\u003e",
                "low": "低温 13℃",
                "fengxiang": "西风",
                "type": "多云"
            }
        ],
        "ganmao": "天气较凉,较易发生感冒,请适当增加衣服。体质较弱的朋友尤其应该注意防护。",
        "wendu": "19"
    }
}

现在我们的目的是要取到"forecast"这个数组里面的所有日期date,并且循环遍历,渲染在页面。

上一节已经成功请求,在打印的时候,(这里我分别打印一下responseresponse.data.data.yesterdayresponse.data.data.forecast,对比一下)先查看一下json的格式。

console.log(response);
 console.log(response.data.data.yesterday);
console.log(response.data.data.forecast);

2:空数组接收数据

this.state里面写一个list:[]空数接收数据。

list:[]

3:赋值

数据接收成功之后,也能在控制台打印了,这个时候需要对数据进行处理赋值,把打印的数据赋值给list

//用到this需要注意指向,箭头函数
    this.setState({
    list:response.data.data.forecast
    })

因为会用到this需要注意指向,所以把axios成功接收数据的函数改成箭头函数。

.then((response) =>{
    console.log(response);
    console.log(response.data.data.forecast);
    //用到this需要注意指向,箭头函数
    this.setState({
    list:response.data.data.forecast
    })
  })

4:渲染在视图层

用map方法对数组进行循环,并且在标签里面进行渲染。

<ul>
    {/* 对数组进行循环 */}
    {
        this.state.list.map((value,key)=>{
          return<li  key={key}>{value.date}</li>
        })
    }
</ul>

效果:点击按钮请求的时候,会将接口数据里面的内容渲染在界面。

参考代码

import React  from 'react';
import axios from 'axios'
class Axios extends React.Component {
    //构造函数
    constructor() {
        super();
        //react定义数据
        this.state = {
        list:[]
        }
    }
    //请求接口的方法
    getData=()=>{
    var  api='https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7';
   
   axios.get(api)
  .then((response) =>{
    //console.log(response);
    console.log(response.data.data.yesterday);
    //用到this需要注意指向,箭头函数
    this.setState({
    list:response.data.data.forecast
    })
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  });
    }
    render() {
        return (
        <div> 
        <h2>axios获取数据</h2>
        <button onClick={this.getData}>获取api接口</button>
<ul>
    {/* 对数组进行循环 */}
    {
        this.state.list.map((value,key)=>{
          return<li  key={key}>{value.date}</li>
        })
    }
</ul>
        </div>
        )
    }
}
export default Axios;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从零开始学习React-在react项目里面使用mock(七)

    从零开始学习React-开发环境的搭建(一) https://www.jianshu.com/p/97f3a1ba168e 从零开始学习React-目录结构...

    王小婷
  • 从零开始学习React-五分钟上手Echarts折线图(十)

    在jQuery里面,我会经常用到Echarts统计图,那么就从自己熟悉的地方写,今天在我之前写的React项目里面使用一下折线图。

    王小婷
  • 番外篇:入门React

    原生js代码乱七八糟的时候,那就来体验一下React。 Tip:内容有点乱,秘籍在最后

    用户3467126
  • 干货 | React Server Components 初探

    Sprite 82,喜欢研究各种语言对 web 框架的实现,函数式编程的爱好者,最近在编译原理前端中验证学习到的函数式编程知识。

    携程技术
  • 基于 Express 应用框架的技术方案选型浅谈

    现在的 Node 对于前端而言可以涵盖各个方面,包括命令行接口、插件、依赖库、脚手架以及 Web 服务等。本文是一篇对于 Node 使用的浅谈文章,会简单讲解一...

    前端迷
  • 详解:如何用好React跨端框架开发小程序

    在上一篇推文中,我们详细讲解了【Vue跨端框架的原理】。下面,我们将从React跨端框架,进入到小程序跨端原理的世界,讲解这些跨端框架的核心原理,深入到源码底层...

    极乐君
  • React: Lottie 动画初体验和优化策略

    lottie 是 Aribnb 开源一个主要面向 Web、iOS、Android、React Native、Windows 的动画库,可以实时渲染After E...

    西南_张家辉
  • 前端技术观察第六期 - Chrome 77里有什么新东西给开发者?

    ConardLi
  • 基于React+Koa实现一个h5页面可视化编辑器-Dooring

    前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探...

    徐小夕
  • React 还是 Vue: 你应该选择哪一个Web前端框架?

    2016年,React在Web端和移动端都实现了迅速的成长,稳稳地领先于其主要竞争对手Augular,巩固了其作为前端框架之王的地位。

    前端迷
  • 前端每周清单第 40 期: JS 的 Core 与 Cost,Node 内存溢出调试,Software 2.0

    前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注...

    王下邀月熊
  • 移动端跨平台开发的深度解析

     跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,...

    GSYTech
  • 谈谈我这些年对前端框架的理解

    最早的时候页面是服务端渲染的,也就是 PHP、JSP 那些技术,服务端通过模版引擎填充数据,返回生成的 html,交给浏览器渲染。那时候表单会同步提交,服务端返...

    lingxiaoguang
  • 谈谈我这些年对前端框架的理解

    最早的时候页面是服务端渲染的,也就是 PHP、JSP 那些技术,服务端通过模版引擎填充数据,返回生成的 html,交给浏览器渲染。那时候表单会同步提交,服务端返...

    前端森林
  • 浅析前端渲染与服务端渲染

    背景知识:   「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制;   「前端渲染」指使用 JS 来渲染页面大部分内容,代表是现在流行的 SPA ...

    吴裕超
  • 最火移动端跨平台方案盘点

    跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,颇...

    JackJiang
  • 最火移动端跨平台方案盘点:React Native、weex、Flutter

    跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,颇...

    JackJiang
  • 「首席架构师推荐」React生态系统大集合

    首席架构师智库
  • 《HelloGitHub》第 65 期

    这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等,涵盖多种编程语言 Python、Java、Go、C/C++、Swift...让你在短时间内感受到开源...

    HelloGitHub

扫码关注云+社区

领取腾讯云代金券