首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >获取错误不变冲突尝试获取帧超出范围的索引?

获取错误不变冲突尝试获取帧超出范围的索引?
EN

Stack Overflow用户
提问于 2018-09-04 21:44:20
回答 1查看 4.9K关注 0票数 6

我创建了VenueList组件。我想在react原生应用程序中使用FlatList组件显示列表。我收到错误:不变冲突试图获取超出范围的帧索引(见截图)。

代码:

VenueList.js:

代码语言:javascript
复制
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:

代码语言:javascript
复制
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:

代码语言:javascript
复制
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);
    });
};

我希望从API端点显示的数据具有如下json数据:

代码语言:javascript
复制
{
  "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
    }
  }
} 

查看屏幕截图:

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-04 22:39:45

根据上述对接口 request的响应,

问题出在操作中设置的payload。您需要将数据从api传递给Flatlist,因为它只接受数组。

代码语言:javascript
复制
axios.get(`my_api_link`)
    .then( venues => 
        dispatch({
            type: FETCH_VENUES,
            payload: venues.data
        })
    )

编辑: api添加VenueList.js组件(如果data密钥中返回值):

代码语言:javascript
复制
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}
            />
        );
    }
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52167783

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档