Getting error Invariant Violation tried to get frame out of range index?

I have create VenueList component. I want to display list using FlatList component in react native app. I am getting error: Invariant Violation tried to get frame out of range index (See screenshot).

Code:

VenueList.js:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, Text, FlatList, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import { fetchVenues } from '../actions/venueAction';

class VenueList extends Component {

    componentWillMount () {
        this.props.fetchVenues();
    }

    renderItem = ({ item }) => (
        <View style={styles.item}>
          <Text>{item.attributes.name}</Text>
        </View>
    );

    render() {

        return (
            <FlatList
                styles={styles.container}
                data={this.props.venues}
                renderItem={this.renderItem}
            />
        );
    }
}  

const styles = StyleSheet.create({
    container: {
      flex: 1
    },
    item: {
      padding: 16,
      borderBottomWidth: 1,
      borderBottomColor: '#ccc'
    }
});

VenueList.propTypes = {
    fetchVenues: PropTypes.func.isRequired,
    venues: PropTypes.array.isRequired
}

const mapStateToProps = state => ({
    venues: state.venues.items
})

export default connect (mapStateToProps, { fetchVenues })(VenueList);

venueReducer.js:

import { FETCH_VENUES } from '../actions/types';

const initialState = {
    items: []
}

export default function (state = initialState, action) {
    switch (action.type) {
        case FETCH_VENUES:
            return {
                ...state,
                items: action.payload
            };
        default:
            return state;
    }
}

venueAction.js:

import { FETCH_VENUES } from './types';
import axios from 'axios';

export const fetchVenues = () => dispatch => {
    axios.get(`my_api_link`)
    .then( venues => 
        dispatch({
            type: FETCH_VENUES,
            payload: venues
        })
    )
    .catch( error => {
        console.log(error);
    });
};

The data which I want to display from API endpoint has json data as follows:

{
  "data": [
    {
      "type": "venues",
      "id": "nb",
      "attributes": {
        "name": "Barasti Beach",
        "description": "Barasti Beach is lotacated in the awesome barasti beach",
        "price_range": "$$$",
        "opening_hours": "10:30-12:40/16:00-2:00",
        "organization": {
          "id": "GD",
          "legal_name": "Barasti",
          "brand": "Barasti"
        },
        "place": {
          "address": "Le Meridien Mina Seyahi Beach Resort & Marina, Dubai Marina - Dubai - United Arab Emirates",
          "latitude": "25.092648",
          "location": [
            "Marina Bay",
            "Dubai",
            "Arab Emirate United"
          ]
        }
      }
    }
  ],
  "meta": {
    "total": 1,
    "cursor": {
      "current": 1,
      "prev": null,
      "next": null,
      "count": 25
    }
  }
}

See screenshot:

Answer

As per the the above response for the api request,

The problem is with the payload which is set in the actions. You need to pass the data from the api to the Flatlist since it accepts only arrays.

axios.get(`my_api_link`)
    .then( venues => 
        dispatch({
            type: FETCH_VENUES,
            payload: venues.data
        })
    )

EDIT: Adding in VenueList.js component (if the api is returning values inside data key):

renderItem = ({ item }) => (
        <View style={styles.item}>
          <Text>{item.attributes.name}</Text>
        </View>
    );

    render() {

        return (
            <FlatList
                styles={styles.container}
                data={this.props.venues.data}
                renderItem={this.renderItem}
            />
        );
    }

Advertisement

Answer