Question

在 React Native JSX 中渲染二维数组中的项目

2020-03-05

350

javascript reactjs react-native jsx

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

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]’）”

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.

有什么想法吗？

Answer 1

您使用 .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>
     )
   })};

Answer 2

应该是 Items[0]

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

检查这个工作的 codesandbox https://codesandbox.io/s/proud-cache-gyuge