在做项目的时候,需要在jsx模板里对数组或对象遍历输出数据,由于react没有类似vue的指令,所以在遍历的时候有点麻烦
数组:
{
this.state.data.Local.map(function(item){
return <img src={item} alt="" />})
}
对象:
{
Object.keys(this.state.data.Personal.pra).forEach(key =>
<p>{this.state.data.Personal.pra[key]}</p>)
}
jsx里不支持if或for语句,所以只能以表达式的形式来遍历
但是在页面刚加载的时候,需要用ajax请求数据,然后修改状态,接着更新dom,由于一开始没有数据返回,浏览器解析到表达式的时候,会报错,提示property of loacl is undefned,所以在这里应该使用三元运算符来屏蔽掉错误,使页面正常加载
改进后:
数组:
{
this.state.data.Local?this.state.data.Local.map(function(item){
return <img src={item} alt="" />}):null
}
对象:
{
this.state.data.Personal?Object.keys(this.state.data.Personal.pra).forEach(key =>
<p>{this.state.data.Personal.pra[key]}</p>):null
}