Menu
I have been getting the:
"VirtualizedList: missing keys for items, make sure to specify a key property on an item or provide a custom keyExtractor" pretty confusing..., the array i am passing it has a key property defined in each object in the array. I have that array defined in this.state. I ran a quick print out in the console to be sure: print out of array
Each object in array is defined as:
var obj = {key: doc.id, value: doc.data()}; (doc and data being from another part of my app, but I know doc.id is unique)
After some googling I then tried to define a Key Extractor like so:
_keyExtractor = (item, index) => item.key; and then here is my flatlist definition:
<FlatList style={{}} data={this.state.FeedDataCollection} keyExtractor={this._keyExtractor} renderItem={(rowData) =>this.RenderFeedCard(rowData)} /> Still receiving the same error, at this point not really sure how to handle this or what it is doing wrong. Any Ideas? Thanks so much!
854
keyExtractor Used to extract a unique key for a given item at the specified index. Key is used for caching and as the react key to track item re-ordering.
Since FlatList is a PureComponent , it assumes that the data is an immutable object and that any change in data is done by setting a new data source object in the state object. Alternatively, use the extraData={this. state. isChanged} prop to re-render a FlatList component by updating the value of isChanged property.
The FlatList component displays the similar structured data in a scrollable list. It works well for large lists of data where the number of list items might change over time. The FlatList shows only those renders elements which are currently displaying on the screen, not all the elements of the list at once.
In 2020, onEndReachedThreshold represents the number of screen lengths you should be from the bottom before it fires the event. I use onEndReachedThreshold={2} to fire onEndReached when I'm two full screen lengths away. Follow this answer to receive notifications.
"VirtualizedList: missing keys for items, make sure to specify a key property on an item or provide a custom keyExtractor"
This is a warning that the elements of the list are missing keys. These unique keys are what allow the VirtualizedList (which is what FlatList is built on) to track items and are really important in terms of efficiency.
You will have to choose a unique key prop, like an id or an email.
The keyExtractor falls back to using the index by default. But the warning will remain visible.
Example : an object defined as {key: doc.id, value: doc.data()} can be used in the extractor as:
keyExtractor={(item, index) => item.key} Flatlist component should look like that:
<FlatList style={{}} data={this.state.FeedDataCollection} keyExtractor={(item, index) => item.key} renderItem={(rowData) =>this.RenderFeedCard(rowData)} /> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
