ネイティブJSXリアクトでの2D配列からアイテムをレンダリング

Snhnhnk：

タイトルとアイコン名：私は2次元配列に基づいてメニューを作成したいと思います。
ここに私が試したものです：

class Menu2 extends React.Component{
  constructor(props) {
   super(props);
   this.state = { Items: [['Home','home'],['User','user'],['Messages','envelope'], ['Finances','wallet'], ['Meal','silverware-fork-knife']]}
 }

 render(){
   <View style={styles.menu}>
   {this.state.Items.map((Items,i) => {
     return(
       <TouchableOpacity style={[styles.menu_item,styles.menu_item]} onPress={() => {this.props.navigation.navigate(Items[i][0]);}}>
       <FontAwesome name={Items[i][1]} size={40} color="#fff"/>
         <Text style={styles.menu_text}>{Items[i][0]}</Text>
       </TouchableOpacity>
     )
   })};
    </View>
 }
}

export default Menu2

返されるエラーは、「例外TypeErrorが未定義（ 『アイテムを[I] [1]』評価）オブジェクトされていません」です

私は何を期待していたことは、「i」が[0] =タイトルとアイテム[i]の[i]を、私のアレイとアイテム程度の反復0、1、2、3、4（私の場合は5回のループ）によりだろうということです[1]アイコン名を=。私が好きだろうようにしかし、私はそれを動作させることができませんでした。

何か案は？

Codebling：

あなたは、使用している.map誤っ！

以下のためのMDNドキュメントArray.prototype.map()このためにコールバックを使用する方法を示し

function callback(currentValue, index, array)

あなたのコールバックはthis.state.Items.map((Items,i) =>置くcurrentValueという名前の変数にItems、しかし、あなたが使用しItems、それは完全な配列であるかのように！

解決

代わりにこれを試してみてください。

   {this.state.Items.map((currentItem) => {
     return(
       <TouchableOpacity style={[styles.menu_item,styles.menu_item]} onPress={() => {this.props.navigation.navigate(currentItem[0]);}}>
       <FontAwesome name={currentItem[1]} size={40} color="#fff"/>
         <Text style={styles.menu_text}>{currentItem[0]}</Text>
       </TouchableOpacity>
     )
   })};