在 React Native JSX 中从 2D 数组渲染项目

Question

我想创建一个基于二维数组的菜单：标题和图标名称。
这是我尝试过的：

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 undefined is not an object (evalating 'Items[i][1]')”

我所期望的是“i”将通过我的数组的迭代 0、1、2、3、4（在我的情况下循环 5 次），因此 Items[i][0] = 标题和 Items [i][1] = 图标名称。 但我无法让它像我希望的那样工作。

有什么想法吗？

Answer 1

您错误地使用了.map！

MDN documentation for 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>
     )
   })};

Answer 2

应该是 Items[0]

      <FontAwesome name={Items[1]} size={40} color="#fff"/>
         <Text style={styles.menu_text}>{Items[0]}</Text>
       </TouchableOpacity>

检查此工作代码框https://codesandbox.io/s/proud-cache-gyuge