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

93 阅读 0 评论 62 点赞

我是靠谱客的博主大意故事，这篇文章主要介绍从零开始学习React-解析json、渲染数据（六），现在分享给大家，希望可以做个参考。

在上一节里面，从零开始学习React-axios获取服务器API接口（五）
https://www.jianshu.com/p/81ca5cc94923。我们请求的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"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
{
    "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，并且循环遍历，渲染在页面。

上一节已经成功请求，在打印的时候，（这里我分别打印一下response，response.data.data.yesterday，response.data.data.forecast，对比一下）先查看一下json的格式。

复制代码

1
2
console.log(response);

复制代码

1
2
 console.log(response.data.data.yesterday);

复制代码

1
2
console.log(response.data.data.forecast);

2：空数组接收数据

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

复制代码

1
2
list:[]

3：赋值

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

复制代码

1
2
3
4
5
//用到this需要注意指向，箭头函数
    this.setState({
    list:response.data.data.forecast
    })

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

复制代码

1
2
3
4
5
6
7
8
9
.then((response) =>{
    console.log(response);
    console.log(response.data.data.forecast);
    //用到this需要注意指向，箭头函数
    this.setState({
    list:response.data.data.forecast
    })
  })

4：渲染在视图层

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

复制代码

1
2
3
4
5
6
7
8
9
<ul>
    {/* 对数组进行循环 */}
    {
        this.state.list.map((value,key)=>{
          return<li  key={key}>{value.date}</li>
        })
    }
</ul>

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

参考代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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;