react-native 在 View标签中使用map()方法无法处理渲染二维数组的处理方法

在使用react-native进行项目开发过程中，遇到了二维数组的数据，需要在页面中渲染，但是使用普遍的数组遍历方法map()，只对父级数组进行了处理，没有处理二维数组。如果是在使用列表组件，比如FlatList时，不用担心该问题，在rendeRow(data)函授中可以使用map()进行处理，但是在普通标签，比如View中去渲染二维数组就会出现该问题。
       

// 自定义二维数组
const arr = [{
                aa: ['a1', 'a2', 'a3'],
                bb: 'bb1',
            },{
                aa: ['b1', 'b2', 'b3'],
                bb: 'bb2',
            }];

// 渲染处理该数组

render(

    return (

       
           {
              arr.map((item, index) => {

                 return (
                      
                            {item.bb}
                            {
                               item.aa.map((t,i) => {
                                      return (
                                         {t}
                                      )
                               })
                            }
                      
                 )
              })
           }
       
    )
)

如果运行上述代码，打开页面，会发现，子数组部分的数据根本就不会显示。但是现在又不需要使用FlatList，因此，需要使用其他方法对该子数组进行处理。最终使用的解决方法是，使用额外定义的方法，处理该子数组，然后将处理结果返回到该嵌套层内。如下：

// 处理子数组的函数

arrFun(data) {
    return(

          data.map((t, i) => {
              return(
                 {t}
              )
          })
    )
}

整体代码如下：

// 自定义二维数组
const arr = [{
                aa: ['a1', 'a2', 'a3'],
                bb: 'bb1',
            },{
                aa: ['b1', 'b2', 'b3'],
                bb: 'bb2',
            }];

// 处理子数组的函数

arrFun(data) {
    return(

          data.map((t, i) => {
              return(
                 {t}
              )
          })
    )
}

// 渲染处理该数组

render(

    return (
       
           {
              arr.map((item, index) => {

                 return (
                      
                            {item.bb}
                            {this.arrFun(item.aa)}  
                      
                 )
              })
           }
       
    )
)

注：注意在使用map()时，在return中只能包含唯一的一个标签，该标签内还要添加key属性，不然在debug模式下会出现黄色警告。