如何使用 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>
        );
    });