React+Axios调用api并且渲染在前端界面

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';
    var  api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
        axios.get(api)
  .then((response) =>{
    // handle success
    console.log(response.data.result);
    //用到this需要注意指向，箭头函数
    this.setState({
list:response.data.result
    })
  })
  .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.title}</li>
        })
    }
</ul>
        </div>
        )
    }
}
export default Axios;

{
    "result": [
        {
            "aid": "499",
            "catid": "20",
            "username": "admin",
            "title": "\u3010\u56fd\u5185\u9996\u5bb6\u3011\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u89c6\u9891\u6559\u7a0b\u514d\u8d39\u4e0b\u8f7d",
            "pic": "portal\/201610\/13\/211832yvlbybpl3rologrr.jpg",
            "dateline": "1476364740"
        },
        {
            "aid": "498",
            "catid": "20",
            "username": "admin",
            "title": "ionic\u57df\u8d44\u6e90\u5171\u4eab CORS \u8be6\u89e3",
            "pic": "",
            "dateline": "1472952906"
        },
        {
            "aid": "497",
            "catid": "20",
            "username": "admin",
            "title": "\u79fb\u52a8\u7aef\u89e6\u6478\u6ed1\u52a8js\u63d2\u4ef6_html5\u624b\u673a\u7aef\u8f6e\u64ad\u63d2\u4ef6",
            "pic": "portal\/201606\/28\/211604ullzo5arr4iurnum.jpg",
            "dateline": "1467119820"
        },
        {
            "aid": "496",
            "catid": "20",
            "username": "admin",
            "title": "\u672a\u6765\u7a0b\u5e8f\u5458\u4f1a\u88ab\u673a\u5668\u4eba\u53d6\u4ee3\u5417\uff1f",
            "pic": "portal\/201606\/02\/221818eafffffm4srfdf4s.jpg",
            "dateline": "1464874140"
        },
        {
            "aid": "495",
            "catid": "20",
            "username": "admin",
            "title": "\u9524\u5b50\u5b89\u5168\u9524_\u9524\u5b50\u771f\u7684\u51fa\u4e86\u4e2a\u201c\u9524\u5b50\u201d\uff1a\u8f66\u5145\uff0b\u5b89\u5168\u9524",
            "pic": "portal\/201605\/20\/213752f6i56f1e0hbfzhkb.jpg",
            "dateline": "1463751505"
        },
        {
            "aid": "494",
            "catid": "20",
            "username": "admin",
            "title": "html5\u80fd\u505a\u4ec0\u4e48_html5\u80fd\u505a\u54ea\u4e9b\u5f00\u53d1\uff1f",
            "pic": "",
            "dateline": "1463664540"
        },
        {
            "aid": "493",
            "catid": "20",
            "username": "admin",
            "title": "\u5e73\u5b89\u53e3\u888b\u94f6\u884cApp\u91c7\u7528-Cordova\u6df7\u5408\u5f00\u53d1",
            "pic": "",
            "dateline": "1463294580"
        },
        {
            "aid": "492",
            "catid": "20",
            "username": "admin",
            "title": "JavaScript Emoji \u8868\u60c5\u5e93_js \u7c7b\u4f3c\u4e8eqq\u5fae\u4fe1\u7684\u8868\u60c5\u5e93",
            "pic": "portal\/201604\/25\/084907r2e3im3dvd1q3f7z.jpg",
            "dateline": "1461545392"
        },
        {
            "aid": "491",
            "catid": "20",
            "username": "admin",
            "title": "cordova\u70ed\u66f4\u65b0\u63d2\u4ef6-\u4e0d\u53d1\u5e03\u5e94\u7528\u5e02\u573a\u52a8\u6001\u66f4\u65b0APP\u6e90\u7801",
            "pic": "portal\/201604\/12\/152638zaxz5xz3t58bfts2.png",
            "dateline": "1460446140"
        },
        {
            "aid": "490",
            "catid": "20",
            "username": "admin",
            "title": "\u592e\u884c\u65b0\u89c4\uff01\u652f\u4ed8\u5b9d\u3001\u5fae\u4fe1\u7528\u6237\u522b\u5fd8\u505a\u8fd9\u4ef6\u4e8b",
            "pic": "portal\/201603\/29\/144942tcnnenueefagukfk.jpg",
            "dateline": "1459234206"
        },
        {
            "aid": "471",
            "catid": "20",
            "username": "admin",
            "title": "HTML5 \u79fb\u52a8app\u5f00\u53d1\u6846\u67b6\u8be5\u5982\u4f55\u9009\u62e9",
            "pic": "portal\/201511\/15\/163112q4kz6k2rgcgpi1tc.jpg",
            "dateline": "1457771160"
        },
        {
            "aid": "488",
            "catid": "20",
            "username": "admin",
            "title": "\u7eafCSS3\u52a8\u753b\u6309\u94ae\u6548\u679c,\u53ef\u7528\u4e8e\u79fb\u52a8wap app\u5f00\u53d1",
            "pic": "portal\/201603\/09\/202742r1kngyt17na7n1nk.jpg",
            "dateline": "1457526780"
        },
        {
            "aid": "487",
            "catid": "20",
            "username": "admin",
            "title": "\u4eac\u4e1c\u6bcf\u5929\u4e8f\u4e0a\u4ebf_\u4e0d\u4f1a\u6284\u88ad\u3001\u527d\u7a83?\u5fc5\u5c06\u6b7b\u5728\u4e92\u8054\u7f51\u4e0b\u4e00\u7ad9\u7684\u8d77\u70b9\u4e0a! ...",
            "pic": "portal\/201603\/02\/155825h28zxs2vsxjccv4c.jpg",
            "dateline": "1456905746"
        },
        {
            "aid": "486",
            "catid": "20",
            "username": "admin",
            "title": "ionic react-native\u548cnative\u5f00\u53d1\u79fb\u52a8app\u90a3\u4e2a\u597d",
            "pic": "portal\/201602\/25\/193433dtzfvlzl1oavhljy.jpg",
            "dateline": "1456398960"
        },
        {
            "aid": "484",
            "catid": "20",
            "username": "admin",
            "title": "\u8fd912\u884c\u4ee3\u7801\u5206\u5206\u949f\u8ba9\u4f60\u7535\u8111\u5d29\u6e83\u624b\u673a\u91cd\u542f",
            "pic": "",
            "dateline": "1453426595"
        },
        {
            "aid": "483",
            "catid": "20",
            "username": "admin",
            "title": "\u7f57\u632f\u5b87\u7f57\u6c38\u6d69\u96f7\u519b\u4eec\u7684\u6f14\u8bb2 \u4f60\u559c\u6b22\u54ea\u4e00\u4e2a",
            "pic": "",
            "dateline": "1452226800"
        },
        {
            "aid": "482",
            "catid": "20",
            "username": "admin",
            "title": "ionic-native-transitions\u8ba9\u4f60\u7684Ionic\u5e94\u7528\u6bd4\u539f\u751f\u8fd8\u5feb",
            "pic": "portal\/201601\/07\/135529z4r7gwglv4rw8l74.jpeg",
            "dateline": "1452145500"
        },
        {
            "aid": "481",
            "catid": "20",
            "username": "admin",
            "title": "ionic 1.2.4 \u53d1\u5e03\uff0c\u6700\u597d\u7684html5\u79fb\u52a8app\u5f00\u53d1\u6846\u67b6",
            "pic": "portal\/201601\/05\/132107h9bllr7li74zoh49.jpg",
            "dateline": "1451971293"
        },
        {
            "aid": "480",
            "catid": "20",
            "username": "admin",
            "title": "phonegap\u53d1\u5e03\u5e94\u7528\u5230appstore",
            "pic": "portal\/201601\/05\/122115yhh22i77sqn2ijc6.jpg",
            "dateline": "1451967910"
        },
        {
            "aid": "479",
            "catid": "20",
            "username": "admin",
            "title": "HTML5\u4eff\u82f9\u679c\u5e94\u7528\u7684\u52a8\u753b",
            "pic": "portal\/201601\/04\/220252ycyddectvivr55pq.png",
            "dateline": "1451916189"
        }
    ]
}