在使用react-native进行项目开发过程中,遇到了二维数组的数据,需要在页面中渲染,但是使用普遍的数组遍历方法map(),只对父级数组进行了处理,没有处理二维数组。如果是在使用列表组件,比如FlatList时,不用担心该问题,在rendeRow(data)函授中可以使用map()进行处理,但是在普通标签,比如View中去渲染二维数组就会出现该问题。
// 自定义二维数组
const arr = [{
aa: ['a1', 'a2', 'a3'],
bb: 'bb1',
},{
aa: ['b1', 'b2', 'b3'],
bb: 'bb2',
}];
// 渲染处理该数组
render(
return (
<View>
{
arr.map((item, index) => {
return (
<View key={index}>
<Text>{item.bb}</Text>
{
item.aa.map((t,i) => {
return (
<Text>{t}</Text>
)
})
}
</View>
)
})
}
</View>
)
)
如果运行上述代码,打开页面,会发现,子数组部分的数据根本就不会显示。但是现在又不需要使用FlatList,因此,需要使用其他方法对该子数组进行处理。最终使用的解决方法是,使用额外定义的方法,处理该子数组,然后将处理结果返回到该嵌套层内。如下:
// 处理子数组的函数
arrFun(data) {
return(
data.map((t, i) => {
return(
<Text key={i}>{t}</Text>
)
})
)
}
整体代码如下:
// 自定义二维数组
const arr = [{
aa: ['a1', 'a2', 'a3'],
bb: 'bb1',
},{
aa: ['b1', 'b2', 'b3'],
bb: 'bb2',
}];
// 处理子数组的函数
arrFun(data) {
return(
data.map((t, i) => {
return(
<Text key={i}>{t}</Text>
)
})
)
}
// 渲染处理该数组
render(
return (
<View>
{
arr.map((item, index) => {
return (
<View key={index}>
<Text>{item.bb}</Text>
{this.arrFun(item.aa)}
</View>
)
})
}
</View>
)
)
注:注意在使用map()时,在return中只能包含唯一的一个标签,该标签内还要添加key属性,不然在debug模式下会出现黄色警告。