Why is there double with the same key in my React-Native FlatList?

2
votes

I'm trying to get an object described at the following endpoint : https://api.cosmicjs.com/v1/67302ce0-7681-11e9-8193-4bd8888ec129/objects?pretty=true&hide_metafields=true

As you will notice there is a _id field with a unique identifier.

So why do i get :

"Warning: Encountered two children with the same key, :. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version."

Here is my FlatList render :

render() {   
    if(this.props.dataToDisplay.objects){
        console.log(typeof(this.props.dataToDisplay.objects))
        console.log(this.props.dataToDisplay.objects)
        this.props.dataToDisplay.objects.forEach((item)=>{
            console.log(item)
        })

        return (
            <View style={[{backgroundColor: this.state.backgroundColor},styles.container]}>
                <FlatList
                    data={this.props.dataToDisplay.objects}
                    keyExtractor={(item, index)=>{item._id.toString()}}
                    renderItem={({item})=>{
                        <Text id={item._id}>{item.title}</Text>
                    }}
                />
            </View>
        );
}
 else {

    return (
        <View style={[{backgroundColor: 
this.state.backgroundColor},styles.container]}>
            <Text>Loading elements.</Text>
        </View>
      );
    }
  }
}

Could there be a problem with the keyExtractor ? I tried with keyExtractor={(item, index)=>{item._id}} with no results...

Thanks for your time.

3
jsonreact-nativereact-native-flatlist

3 Answers

6
votes

the keyExtractor is ok. the return function is not:

keyExtractor={(item, index)=>{item._id.toString()}}

by opening the curly braces {} the engine needs a return keyword to return anything. Otherwise it's a void

do either:

keyExtractor={(item, index)=> item._id.toString()}

or:

keyExtractor={(item, index)=> { return item._id.toString()}}

Same goes for the renderItem method:

renderItem={({item})=>{
           <Text id={item._id}>{item.title}</Text>
         }}

since you opened the {}, you canceled the arrow function's implicit return and you have to append it explicitly

renderItem={({item})=>{
        return <Text id={item._id}>{item.title}</Text>
         }}

btw,id is not one of <Text/>'s props. Without the keyExtractor function, you would have to append the key property yourself (instead of id). feel safe to remove it =)

1
votes

Instead of keyExtractor={(item, index)=>{item.key}} use keyExtractor={(item, index)=>index.toString()}

0
votes

In your example you don't have any attribute called "key", is for this reason that you have an error. You should be to try assign another attribute like a key element, maybe the attribute "_id", that exists in your object, something like this: 

<FlatList
data={this.props.dataToDisplay.objects}
keyExtractor={(item, index) => {item._id}}
numColumns={2}
renderItem={({item})=>{
  <Text id={item._id}>{item.title}</Text>
}}
/>