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的本质是一种声明式语言,她的优点是能够随着数据的变化动态得展示前端页面。