在 React Native 中访问 JSON 对象数组答案

【问题标题】：Accessing JSON Array of Objects in React Native在 React Native 中访问 JSON 对象数组
【发布时间】：2019-11-19 10:25:00
【问题描述】：

我从 api 获取一些数据作为 JSON 响应。这是数据的样例：

Array [
 Object {
   "cashless_identifier": "N/A",
   "controlled_parking_zone": "CA-C",
   "disclaimer": "The information provider and/ or licensor are not liable for any errors or omissions contained within this dataset and shall not be liable for any loss, injury or damage caused by its use.",
   "easting": "530868",
   "epsg_27700_well_known_text_geometry": "LINESTRING (530865.6180417204 181481.26078470872,530863.7711480337 181480.49100505587,530872.4696874953 181460.3867598362,530874.555687954 181461.17653376574)",
   "epsg_4326_well_known_text_geometry": "LINESTRING (-0.11531456604058134 51.5171043712184,-0.11534145426089688 51.517097880725345,-0.11522362265321448 51.51691519531169,-0.11519328303934162 51.516921810131386)",
   "last_uploaded": "2019-11-18T23:01:51.000",
   "latitude": "51.517003",
   "location": Object {
     "human_address": "{\"address\": \"\", \"city\": \"\", \"state\": \"\", \"zip\": \"\"}",
     "latitude": "51.517003",
     "longitude": "-0.115284",
   },
   "longitude": "-0.115284",
   "maximum_stay": "N/A",
   "nearest_machine": "N/A",
   "northing": "181470",
   "organisation_uri": Object {
     "url": "http://opendatacommunities.org/id/london-borough-council/camden",
   },
   "parking_bay_length_metres": "22",
   "postcode": "WC2A 3PD",
   "restriction_type": "taxi rank",
   "road_name": "Lincoln's Inn Fields",
   "spatial_accuracy": "Defined By Custodian",
   "tariff": "N/A",
   "times_of_operation": "at any time",
   "unique_identifier": "46042626",
   "valid_parking_permits": "N/A",
 }, .........

数组中返回了许多对象。我的问题是，如何单独访问每个对象？这就是我存储数组的方式：

const [parkingSpaces,setparkingSpaces] = useState([])
setparkingSpaces(response.data)

所以如果我做parkingSpaces.length，这将返回数组的长度。但是，我不知道如何单独访问每个对象及其值。

【问题讨论】：

标签： arrays json react-native

【解决方案1】：

知道你在这里做什么会很有帮助：

如果您以列表的形式呈现数据，那么您只需映射数据，为每个元素呈现一个元素（例如，使用 FlatList，您只需将该数组作为数据属性转储）。然后您可以单独访问每个对象，并为每个对象渲染一个组件，该组件从每个对象中获取您需要的任何内容作为道具。
如果您想单独访问每个项目，您必须在每个要从中选择项目的对象中都有一些内容。在这种情况下，您可以使用find 来定位正确的项目，或者您可以将传入的数组规范化为由您要选择的事物所键入的对象。

例如

function arrToDict(arr, key) {
  return arr.reduce((acc, item) => ({...acc, [item[key]]: item }));
}

然后

setParkingSpaces(arrToDict(yourApiResponse)

正如我所说，需要更多关于使用的信息：这应该只是基本的 JS，但没有足够的上下文 atm - 一旦我对需要什么更清楚，我会编辑我的答案。

【讨论】：

感谢您的彻底回复。我不想渲染它，目前我只想能够单独地 console.log() 每个对象。抱歉没有提供足够的上下文，我是新手。
你能否展示你在哪里获取数据的完整组件，以及你打算如何使用它（我知道你是如何存储它的，很好，目前你只想记录以检查它，但查看上下文会有所帮助）。此外，您想使用停车位对象上的什么属性来选择——您想查看一个，但您想使用什么作为键来选择您想要的？

【解决方案2】：

您可以使用Array.map() 使用其对应的索引来处理数组中的每个对象。它足以满足您的应用程序。

【讨论】：

你能给我看一个例子来说明我如何设置 setParkingSpaces.map() 吗？

【解决方案3】：

考虑到您给定的示例，您可以使用 javascript map 函数来遍历数组 f 对象，示例代码如下所示

<View style={{flex:1}}>
{
  setParkingSpaces.length > 0 &&
  setParkingSpaces.map((item, index) => {

    return(
      <View style={styles.eachItem} key={"items-"+index}>
        ...........
        <Text>{item.latitude}</Text>
        <Text>{item.longitude}</Text>
        <Text>{item.cashless_identifier}</Text>
        ..........
      </View>
    )
  })
}
</View>

【讨论】：