地图列表清单的javascript

Question

我试图显示从以下列表项：

const dataItems = [
{'key': '1','label': 'Informations Basiques', 'icon' : 'person', 'fields': [{'field':'Nom', 'value':'Piedigrossi'}, {'field':'Prénom', 'value':'Guillaume'}, {'field': 'Mail', 'value': '[email protected]'}]},
{'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': []},];

这里是我的反应本地代码：

render(){

    return(

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

我有以下错误：“未定义是不是（评估item.key）的对象

我不明白为什么item.key不引用的东西。特别是我想显示“场”和项目“田”的“价值”。

谢谢

Answer 1

问题是你把周围{}的item。这对解构的对象，并使用对象作为参数的item财产ES6速记符号。你只需要把{}围绕JavaScript表达式的HTML元素里面，里面不正常的JS代码之类的函数的参数。

它应该是：

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

实际上，你可以用解构这里获取key：

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

Answer 2

虽然映射你需要遵循的解构ES6概念。

1. 主要参考错误：你需要提供一个独特的键是指每一个文本 <Text key={item.key}> { item.label}</Text>
2. 您需要同时拆解可通过脂肪箭头的功能。 qazxsw POI

当使用Fatarrow功能和解构，你并不需要添加功能括号（），您可以将其设置为这样上面的叙述。

也未包括{}在返回之间如果单线参考将要返回

Answer 3

你可以试试这个呢？

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

我不知道反应本地人，但我希望这有助于

Answer 4

问题是，你解构由

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

符号的元素。

你不需要这么做。改变你的代码：

{item}

应该做的伎俩。