React-native-gifted-chat: Warning: flattenChildren

[luco]

Hey,

I'm getting this error:

Warning: flattenChildren(...): Encountered two children with the same key, .1:$r_s1_dfad5347-ab44-4f4d-8ff2-f70c3c311e5f. Child keys must be unique; when two children share a key, only the first child will be used.

I'm trying to random the message id, but it seems it's not working:
this.setState({ messages: [ { _id: Math.round(Math.random() * 1000000), text: 'Hello developer', createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)), user: { _id: 2, name: 'React Native', avatar: 'https://facebook.github.io/react/img/logo_og.png', }, }, ], });

What's wrong? Thanks.

[kfiroo]

@luco Hey,
Looks like the duplicate key is a GUID and not a random number, so I guess your code is not the problem.

We recently merged this PR https://github.com/FaridSafi/react-native-gifted-chat/pull/259 by @dgdavid which introduced GUID generation for new message.

Maybe it's related?

[luco]

@kfiroo Oh yeah, I think it is. I'm gonna update and test. Thanks for the support.

[dgdavid]

Wow!

Sorry, I hadn't seen this issue before. Until now, I never got a duplicated GUID, but it seems that it's possible https://github.com/kelektiv/node-uuid/issues/117

@kfiroo any ideas about how we can to test it?

[kfiroo]

@dgdavid Yeah, I missed this issue too! :)

I never got any duplicates as well, and I'm using the lib in other projects too.
I don't think there is much we can do right now.

@luco @niftylettuce @Haakh @YoonJaePark if you have any consistent scenario can use share it so we can investigate?

Thanks

[Haakh]

@kfiroo in my use case I have different channels. All i do is change the source of messages of GiftedChat component based on the current selected channel/Group ( which is a Store managed by Mobx ). I investigated and below is what I found.

• Each time i create a new message( in any channel ) - this error doesn't show up consistently. BUT once the error occurs the first time..after that time it's consistent every time I create a message.

• It maybe because of Mobx rerendering ( just a guess ).

I'll add the code snippet if you need? But it's basically Giftedchat rendering the messages provided by mobx ( which are computed based on what channel has been selected. )

[kfiroo]

@Haakh Thanks for the info!
A code snippet is always helpful :)

What this error says is basically that you are providing gifted-chat with an array of messages that has at least 2 message with the same _id

There are 3 situations (I can think of) that might cause messages to have the same guid _id:

1. Your backend generates duplicate ids for message
2. Your selector from the client store is returning the same message multiple times
3. The node-uuid library is generating the same guid as @dgdavid pointed out here https://github.com/kelektiv/node-uuid/issues/117

Hope that's helpful

[shireen]

I had this flattenChildren error. I was storing messages in Firebase and populating the messages array using .on which is a listener that is called every time a new chat is added. After changing from .on to .once, the error went away. Not sure if this is helpful to you guys but maybe will help someone who has hooked up react-native-gifted-chat to Firebase and runs into this error.

[Haakh]

@kfiroo I know it's too late ...
This problem definitely occurs because of same _id being received multiple times from the backend.
Somehow the socket event listener fires more than once for each message received.
• I solved it by adding a check to see for duplicate monoDB _id's before adding it to the stores.

I am using feathersjs and this problem was hard to reproduce from the backend.
Thanks for the help.

Hack: -
To anyone getting this error make sure to store the message id (recieved) temporarily and check if it matches the next message id received in the listener. if so discard it.
tempID = 0;
if(message._id !== tempID) { add to stores(message); } else { discard this message as it's already been added to the stores. }

[kfiroo]

@Haakh You could store the messages in your store as an object with the _id as keys.
This way you can be sure you don't have any duplicates :)

[Haakh]

@kfiroo I am storing all the messages as objects with _ids. But the backend still somehow manages to send me multiple triggers of the same event. The above Hack works fine.
Is there a way by which only unique _id's are pushed (in an array of objects) and the duplicates are discarded?

[kfiroo]

@Haakh What I meant was that in your client store you can use an object to store the messages, something like this:

const messages = {
  msgId1: {
    _id: 'msgId1',
    ... rest of you message object
  },
  ... more messages
};

Then when you want to render the chat you can use Object.values(messages) or _.values(messages) to get an array

[dzpt]

I ran into this error today.
If i load data normally, it's ok, but if i load earlier messages by using this way #321
messages.push(newMessage)

i get this error.

Even the _id is unique, that is record id in my database.

[nikolal]

I am also having this.

It must be connected to kelektiv/node-uuid#117

All I am doing is generating messages using setinterval.

       {
         _id: Math.round(Math.random() * 100000000),
         text: 'Hello developer',
         createdAt: new Date(),
         user: {
           _id: 2,
           name: 'React Native',
           avatar: 'https://placeimg.com/140/140/any',
         },
         image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8ld1iXhAy8pt1LEFlZNT4zJzVFp32Ak90qixXK9HUee5clODI',
       },

Edit: It render first two messages without a warning, but third one is always duplicate.