Рендеринг предметов из 2D Array в React Native JSX - PullRequest
Новая
       12

Рендеринг предметов из 2D Array в React Native JSX

1 голос
/ 05 марта 2020

Я хотел бы создать меню на основе двумерного массива: заголовок и имя значка.
Вот что я попробовал: 

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 не является объектом (вычисление« Items [i] [1] ') »

*» 1008 *

То, что я ожидал, это то, что "i" будет итерацией 0, 1, 2, 3, 4 (в моем случае 5 раз) в моем массиве, и поэтому Items [i] [0] = название и Items [i] [1] = имя иконки. Но я не мог заставить его работать так, как мне бы хотелось.

Есть идеи?

Ответы [ 2 ]

1 голос
/ 06 марта 2020

Вы используете .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>
     )
   })};
0 голосов
/ 06 марта 2020

Это должны быть элементы [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

...