1. 程式人生 > >react-native 在 View標籤中使用map()方法無法處理渲染二維陣列的處理方法

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 (

       <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模式下會出現黃色警告。