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

Question

I'd like to create a menu based on a 2 dimensional Array: title and icon name.
Here's what I tried:

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

Error returned is "TypeError undefined is not an object (evaluating 'Items[i][1]')"

What I was expecting is that "i" would by the iteration 0, 1, 2, 3, 4 (looping 5 times in my case) of my array and so Items[i][0] = the title and Items[i][1] = the icon name. But I couldn't make it work like I would have liked.

Any ideas?

Answer 1

You're using .map incorrectly!

The MDN documentation for Array.prototype.map() shows how to use the callback for this

function callback(currentValue, index, array)

Your callback this.state.Items.map((Items,i) => puts the currentValue into a variable named Items , but then you use Items as if it were the full array!

Solution

Try this instead:

   {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

It should be Items[0]

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

check this working codesandbox https://codesandbox.io/s/proud-cache-gyuge