I'm new to React and React native and am trying to retrieve data from an API and then render it but I seem to be running into problems.

I'm getting errors like:
undefined is not an object (evaluating 'attractions.map') in RenderPhotos_render

I may have jumped into React Native too early...So excuse my lack of knowledge!

import React, {Component} from 'react';
import {StyleSheet, View, ActivityIndicator} from 'react-native';
import MapView, {Marker} from 'react-native-maps';
import {connect} from 'react-redux';

const mapStateToProps = state => {
  return {
    attractions: state.attractions.attractions,
  };
};

const mapDispatchToProps = dispatch => {
return {
    GET_Attractions(callback) {
      dispatch({type: 'attractions/GET_Attractions', callback});
    },
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(
  class Home extends Component {
    state = {
      loading: true,
    };

    componentDidMount = () => {
      const callback = () => {
        this.setState({
          loading: false,
        });
      };

      this.props.GET_Attractions(callback);
    };

    renderMapMarker = () => {
      const {attractions} = this.props;

      return attractions.map(marker => {
        return (
          <Marker
            key={marker.caseId}
            title={marker.caseName}
            description="點擊查看詳細資料"
            coordinate={{
              latitude: marker.latitude,
              longitude: marker.longitude,
            }}
          />
        );
      });
    };

    render() {
      if (this.state.loading) {
        return (
          <View style={styles.container}>
            <ActivityIndicator />
          </View>
        );
      } else {
        return (
          <View style={styles.container}>
            <MapView
              style={styles.mapView}
              initialRegion={{
                latitude: 24.149706,
                longitude: 120.683813,
                latitudeDelta: 8,
                longitudeDelta: 8,
              }}>
              {this.renderMapMarker()}
            </MapView>
          </View>
        );
      }
    }
  },
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  mapView: {
    width: '100%',
    height: '100%',
  },
});

CodePudding user response：

You are trying to use a prop "attractions" that is being populated from the reducer, so initially when your screen is being rendered the prop "attractions" will be undefined so you need to achieve this with the condition to make the error go away.

{attractions && this.renderMapMarker()}

CodePudding user response：

By default attractions might be undefined so you can check to validate first then render if it has data to render like

render() {
  const {attractions} = this.props; // Add this

  if (this.state.loading) {
    return (
     ...
    );
  } else {
    return (
      <View style={styles.container}>
        <MapView
          ...
          >
          {this.props.attractions && this.renderMapMarker()} // and this
        </MapView>
      </View>
    );
  }
}