Question

在这里使用React Native应用中的GraphQL查询的数据遇到一个奇怪的问题。我有一个查询，获取具有几个字段的所有属性（物理属性/房屋），其中包括来自graph.cool的2个嵌套/关系字段。我那里只有5个节点，因此大小根本不成问题。

当我将this.props.allProperties登录到控制台时，我会看到

“未定义”

然后是我的对象数组。

但是当我尝试使用this.props.allProperties.map()映射每个项目并呈现一个元素时，出现“ TypeError：undefined不是对象（评估'this.props.allProperties.map”）错误。

>

这很奇怪，因为似乎我的数据正在获取，但可能不是及时渲染？我不知道。

这是我的代码...

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Container, Content } from 'native-base';
import MapView, { Marker } from 'react-native-maps';
import { Transition } from 'react-navigation-fluid-transitions';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

import navStyles from '../../styles/navStyles';
import FooterTabs from '../../layout/FooterTabs';

class KoviMap extends Component {

render() {
    console.log(this.props.allProperties)
    return (
        <Container style={styles.container}>
            <MapView
                style={styles.map}
                initialRegion={{
                    latitude: 35.2253342,
                    longitude: -80.8392494,
                    latitudeDelta: 0.0922,
                    longitudeDelta: 0.0421
                }}
            >

                {this.props.allProperties.map(property => (
                    <Marker
                        coordinate={`${property.coordinates.lat},${property.coordinates.long}`}
                        title={property.propertyName}
                    />
                ))}

            </MapView>
        <Content></Content>
            <Transition shared="footerTabs">
                <FooterTabs
                    activeBtn='map'
                    navigation={this.props.navigation}
                />
            </Transition>

        </Container>
    );
}
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
},
map: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    top: 0
}
})

const getMarkers = gql`
    query getMarkers {
    allProperties {
        id
        propertyName
        units
        address {
            street
            city
            state
            zip
        }
        coordinates {
            lat
            long
        }
    }
}
`;

export default graphql(getMarkers, {
    props: ({data}) => ({...data})
})(KoviMap);

尝试对GraphQL数据进行.map（）时，React Native``未定义不是对象''

0 个答案: