React Native и FlatList: попытался получить кадр для индекса вне диапазона NaN

Question

Я новичок с реагирующим родным.У меня есть переменная this.state.forums, которая имеет это значение:

{
    "7": {
        "id": 7,
        "wording": "Loisirs, vie sociale et débats"
    },
    "3": {
        "id": 3,
        "wording": "Forums"
    }
}

Но когда я пишу:

<FlatList
    data={this.state.forums}
    renderItem={({ item }) => <Item title={item.wording} />}
    keyExtractor={item => item.id.toString()}
/>

У меня есть эта ошибка:

ИнвариантНарушение: Инвариантное Нарушение: Попытка получить кадр для индекса вне диапазона NaN

Можете ли вы мне помочь?

И знаете ли вы, как назначить ключ в keyExtractor (не item.id)?

Answer 1

Попробуйте это: -

// for of
for (let userObject of this.state.forums) {
console.log(userObject.wording); // here you can render your views
}

// map function works for array
this.state.forums.map((userData) => { 
return(
console.log(userData); // render your view
 userData.map((data) => {
  <Text>{data.wording}</Text>
 })
)
});

Ссылка ссылки: - Реагирует Собственный цикл foreach

Answer 2

FlatList хочет получить данные в виде массива.Вы даете ему объект.Получите Object.values, и вы будете в порядке.Как и data={Object.values(this.state.forums)} или даже лучше, храните форумы в состоянии как массив.