如何在本机反应中获取json的孩子答案

【问题标题】：How to get child of json in react native如何在本机反应中获取json的孩子
【发布时间】：2019-01-07 13:39:30
【问题描述】：

我需要从 json 文件中获取 src。

JSON：

[
  {
    "id": 38,
    "name": "Product",
    "images": [
        {
            "id": 26,
            "src": "https://example.com/image.png",
            "name": "pants",
            "alt": ""
        }
    ],
    ...

代码：

<ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData)=>
          <View style={{height:40}}>
            <Text>{rowData.images}</Text>
          </View>
        }
        />

我可以通过 rowData.name 显示 id 或 name，但图像 src 不起作用。

【问题讨论】：

标签： react-native fetch

【解决方案1】：

由于位于 images 键中的 datatype 是一个数组，我认为从数组中获取索引将帮助您完成所需的操作。

你能试试rowData.images[0]吗？我要添加的后续代码取决于您是否希望有多个图像，以及您想对这些图像做什么。

如果要显示图像，则需要使用React Native Image 组件。

<View style={{height:40}}>
  <Image
    style={{ width: 50, height: 50 }}
    source={{ uri: dataRow.images[0].src }}
  />
</View>

【讨论】：

如果有多个图像并且如果只有一个图像你不应该使用数组，这将不起作用。
@swonder 正确，这个问题可以问得更好，但 Alireza 是新成员，所以我只是想让他朝着正确的方向前进。

【解决方案2】：

您需要遍历图像数组才能访问src 属性。

你可以这样实现（未经测试）：

<ListView
        dataSource={this.state.dataSource}
        renderRow={ (rowData)=> {
         return rowData.images.map( (image, index) => {
            return (<View key={index}><Text> { image.src } </Text></View>)
          })
        }}
/>

【讨论】：

尝试添加退货，所以return rowData.images.map...
工作了，但我们有一个警告：数组中的每个孩子都应该有一个唯一的关键道具。
很容易解决，在<View>的return语句中添加<View key={index}>，然后将地图更改为images.map( ( image, index ) => ，您的问题应该得到解决。