使用AXIOS获取后台数据作业所感所想

1 、遇到的问题

二话不说，先上代码
1.1 使用axios读取后台数据
在react default export 类中的构造函数constructor中调用了如下方法

initData(){
    const paras = {
      year:"2020",
      baseCode:"BS"
    }
    axios.all([gettest(paras)]).then(
      axios.spread((singleReportData1) => {
        this.setState({
          singleReportData:singleReportData1.allSeasons
        })

    })
    )
  }

按照我以前在java中编程的经验，singleReportData:singleReportData1已经被赋值了。
1.2 在render中遇到了undefined的问题
一言不合还是得上代码：

//组织数据singleData
    let singleData = [
      {
        key: '1',
        XH: 1,
        ZBLB: 'XXXX',
        ZYZBMC: 'XXXX',
        JLDW: '%',
        SJS1:91.188,
        DFS1:singleReportData[0].score_1,
        PMS1:3,
        SJS2:88.893,
        DFS2:8,
        PMS2:2,
        SJS3:91.541,
        DFS3:10,
        PMS3:1,
        SJS4:90.416,
        DFS4:8,
        PMS4:2,
        SJND:90.416,
        DFND:10,
        PMND:1,
      }]

为什么从后台已经读到了数据，最终还是undefined!!!

2 、解决方法

在render代码中增加一个判断即可：

DFS1:singleReportData.length>0?singleReportData[0].score_1:0,

问题解决了，前台展示先展示为0，后台获取数据后有了变化。

3 、所感所想

以上让作者能稍微理解react的本质是一种声明式语言，她的优点是能够随着数据的变化动态得展示前端页面。