如何使用React Native + React Redux在嵌套JSON API中映射数组？

Question

可能重复这个

首先，很抱歉，这个问题看起来很愚蠢，但我确实需要一些帮助。 我的问题是，我可以说的部分与我上面粘贴的问题链接相同。

我有这样的JSON响应

{
"timestamp": 1510222037,
"verb": "GET",
"object": "route",
    "data": {
        "houseGeoJSON": {
            "type": "FeatureCollection",
            "features": [
                {
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": [
                            [
                                [
                                    101.60808563232422,
                                    3.1660120732795227
                                ],
                                [
                                    101.60975933074951,
                                    3.1649818312001101
                                ],
                                [
                                    101.6114330291748,
                                    3.164983676545967
                                ],
                                [
                                    101.6114330291748,
                                    3.166054929292111
                                ],
                                [
                                    101.60933017730713,
                                    3.1668283292030202
                                ],
                                [
                                    101.60847187042236,
                                    3.1666976705346896
                                ],
                                [
                                    101.60808563232422,
                                    3.1660120732795227
                                ]
                            ]
                        ]
                    },
                    "type": "Feature",
                    "properties": {}
                }
            ]
     },
        "description": "Property",
        "id": 1,
        "houseType": "Apartment",
        "name": "First House"
    }
}

现在，我尝试遍历此JSON响应，并在应用程序的页面上呈现值。

以下是该页面的代码。

import React, { Component } from 'react';
import { View, Text, ScrollView } from 'react-native';
import { Card, Button } from 'react-native-elements';
import { connect } from 'react-redux';

class RouteScreen extends Component {

    onButtonPressClose = () => {
        this.props.navigation.navigate('Home');
    }

   render() {
        const houseInfo = this.props.houses.map(function (item) {
            return (
                <View>
                    <Text>Name: {this.props.houses.name}</Text>
                    <Text>Description: {this.props.houses.description}</Text>
                    <Text>ID: {this.props.houses.id}</Text>
                    <Text>Coordinates: {item.houseGeoJSON.features.geometry.coordinates}</Text>
                </View>
            );
        });
        return (
            <ScrollView>
                <Card>
                    <View>
                        { houseInfo }
                    </View>
                </Card>

                <Card>
                    <Button
                        small
                        title="Back"
                        backgroundColor="#94b8b8"
                        onPress={this.onButtonPressClose}
                    />
                </Card>

            </ScrollView>
        );
    }
}

function mapStateToProps({ houses }) {
    return { houses: houses.data };
}

export default connect(mapStateToProps)(RouteScreen);

• 改编自我粘贴的链接。

这给了我一个错误，说TypeError: this.props.houses.map is not a function

我想问一下我在正确的轨道上吗？ 如果没有，请告知我该代码中是否缺少任何内容。

感谢您的帮助和建议。 我真的很感激。

Answer 1

第一个问题是，如我所见， this.props.houses是一个对象，而不是数组。 您只能在数组上使用map 。

第二个问题item.houseGeoJSON.features是一个数组，而不是一个对象。

因此，我为您提供2种解决方案，

如果您想用一个房屋名称显示所有坐标，可以按照以下步骤操作，

   render() {
        const houseInfo = this.props.houses.map(function (item) {
            return (
              <Text>
                 {`Coordinates: ${item[0]}-${item[1]}`}
              </Text>
            );
        }.bind(this));
        return (
            <ScrollView>
                <Card>
                    <View>
                      <Text>Name: {this.props.houses.name}</Text>
                      <Text>Description: {this.props.houses.description}</Text>
                      <Text>ID: {this.props.houses.id}</Text>
                      { houseInfo }
                    </View>
                </Card>

                <Card>
                    <Button
                        small
                        title="Back"
                        backgroundColor="#94b8b8"
                        onPress={this.onButtonPressClose}
                    />
                </Card>

            </ScrollView>
        );
    }

如果要查看每个坐标的软管名称，则可以执行以下操作；

    const houseInfo = this.props.houseshouseGeoJSON.features[0].geometry.coordinates.map((item) => {
        return (
            <View>
                <Text>Name: {this.props.houses.name}</Text>
                <Text>Description: {this.props.houses.description}</Text>
                <Text>ID: {this.props.houses.id}</Text>
                <Text>{`Coordinates: ${item.[0]}-${item[1]}`}</Text>
            </View>
        );
    });