javascript - 映射列表的列表 javascript

Question

我尝试显示以下列表中的项目:

const dataItems = [
{'key': '1','label': 'Informations Basiques', 'icon' : 'person', 'fields': [{'field':'Nom', 'value':'Piedigrossi'}, {'field':'Prénom', 'value':'Guillaume'}, {'field': 'Mail', 'value': 'guillaume.piedigrossi@gadz.org'}]},
{'key': '2','label': 'Téléphone', 'icon' : 'phone', 'fields': [], 'values': []},
{'key': '3','label': 'Adresse', 'icon': 'place', 'fields': [], 'values': []},
{'key': '4','label': 'Etat civil', 'icon': 'location-city', 'fields': [], 'values': []},
{'key': '5','label': 'Professionel', 'icon': 'school', 'fields': [], 'values': []},
{'key': '6','label': 'Informations familiales', 'icon': 'group', 'fields': [], 'values': []},];

这是我在 React Native 中的代码:

render(){

    return(

        <View style={{}}>
           {dataItems.map(({item}) => (
              <Text>{item.key}</Text>
           ))}
        </View>)}

我有以下错误:“未定义不是一个对象(评估 item.key)

我不明白为什么 item.key 没有引用某些东西。特别是我想显示“字段”和项目“字段”的“值”。

谢谢

Answer 1

问题在于您放置在 item 周围的 {}。这是 ES6 简写符号，用于解构对象，并使用对象的 item 属性作为参数。您只需将 {} 放在 HTML 元素内的 Javascript 表达式周围，而不是放在像函数参数这样的普通 JS 代码内。

应该是:

dataItems.map(item => (
    <Text>{item.key}</Text>
))

您实际上可以在这里使用解构来获取 key :

dataItems.map(({key}) => (
    <Text>{key}</Text>
))