Как избавиться от «Invariant Violation tried to get frame out of range index NaN»?

Question

[Сергей Золотарёв]

Доброго дня!
До сих пор не могу разобраться с причиной вот этого сообщения от компилятора:

Invariant Violation tried to get frame out of range index NaN

Я реализовал выборку и получение данных из CSV-файла, который находится внутри приложения и когда я запустил tsx-компонент, компилятор принёименно сообщение в виде ошибки.

Что это означает и что я пропустил в основании данного вопроса? Сами примеры проблемного кода в комментариях и заранее вам спасибо!

Comments

[Сергей Золотарёв]

Код логики:

import * as React from 'react';
import { Text, View } from 'react-native';
import { readRemoteFile } from 'react-native-csv';
import { IServiceControl } from "../../handlers/ControlInterface";
let inputDataset = ["../../datasets/productCategories.csv"];


export class StoreListService{
    storeService: { svc: any; query: any; };

    constructor(event: any,type: any){
        this.storeService = {
            svc: event,
            query: type
        }
    }
    svc: string | undefined;
    query: string | undefined;

    protected serviceList(event : IServiceControl){
		switch(event.svc){
			case "categories":
				let list = new Map<string, any>();

				readRemoteFile(inputDataset[0], {
				  download: true,
				  header: true,
				  complete: (results) => {
						var rows = results.data;
						for(let i = 0; i < rows.length; i++){
							list.set("id",rows[i].ID);
							list.set("cat",rows[i].Category);
						}
				  }
			    });

				return list;
			break;
			default: return null; break;
		}
    }
    public eventStart(){
        return this.serviceList(this.storeService);
    }

}

Код проблемного интерфейса:

import * as React from 'react';
import { FlatList, Text, View } from 'react-native';
import { StoresFeed } from '../handlers/stores/homepage/Feed';
import { StoreListService }  from '../services/stores/homepage/List';

const CatsRender = ({item}: {item: any}) => {
	return <Text style={pageStyle.LCList}>{item.cat}</Text>
}

export function Stores(){
    return (
        <React.Fragment>
            <View style={screenStyle.list}>
                <Text style={pageStyle.list}>Категории</Text>
				<FlatList data={catList} renderItem={CatsRender} />
            </View>
        </React.Fragment>
    );
}

const pageStyle = new StoresFeed('ui-change',0).eventStart(),
      screenStyle = new StoresFeed('ui-change',1).eventStart();

let catList = new StoreListService('categories',null).eventStart();

[Сергей Золотарёв]

Структура CSV-файла:

ID;Category
1;Молочные продукты
2;Хлебобулочные изделия
3;Мясные дилекатесы
4;Сырные дилекатесы
5;Сладости
6;Мясная продукция
7;Рыбная продукция
8;Бытовая химия
9;Фрукты и овощи
10;Чай и напитки

Answer 1

[Alexandroppolus]

FlatList data должно быть массивом или простым объектом, а ты передаешь туда Map. Возможно, причина в этом.

И кстати, let catList = new StoreListService('categories',null).eventStart(); создаст пустую коллекцию. Она заполнится в колбэке readRemoteFile, то есть асинхронно. Если Stores к моменту заполнения будет уже нарисован, то он не обновится. Это так, лирическое отступление.

Ну и конечно, в catList в текущей реализации будет только 2 записи - id и cat последней строки.