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

FlatList希望其数据为数组形式。您正在给它一个对象。获取Object.values，您会很好。像data={Object.values(this.state.forums)}甚至更好一样，将论坛存储在数组中。

Answer 2

尝试一下：-

// 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>
 })
)
});

引用链接：-React Native foreach loop

React Native和FlatList：尝试获取超出范围索引NaN的帧

2 个答案: