Comment réparer 'flattenChildren (...): Rencontré deux enfants avec la même clé' avec React et l'interface utilisateur sémantique

Question

Je comprends que la solution à ce problème est d'ajouter un key={} à votre élément.

Cependant, dans mon cas, j'ai un tableau de chaînes de journaux qui peuvent être identiques, et je suis en train de créer une liste de l'interface utilisateur sémantique comme ceci:

<List items={logItems}></List> 

Comment puis-je éviter le problème flattenChildren()?

Answer 1

Vous devez trouver un moyen pour identifier une ressource

Par exemple, si vous voulez rendre une liste des journaux que vous pouvez peut-être utiliser comme clé la date à laquelle ce journal a été créé ou dans le pire des cas, si vous N'avez pas un ID de ce journal, la date à laquelle le journal a été créé, vous pouvez utiliser comme clé l'index dans ce tableau (La dernière approche apporte des problèmes lorsque vous modifiez le tableau dans le client). la clé que vous devez utiliser List.Item à côté de votre élément de liste pour sémantique-ui

Certains code

<List> 
    {logs.map((log, index) => <List.Item key={log.createdDate /* or index */}> 
     {log} 
    </List.Item> 
)} 
</List> 

Answer 2

items est une collection raccourci qui nécessite unique keys. Les codes ci-dessous sont égaux, car les usines sous capot génèrent une clé à partir d'une valeur. Donc, si vous voulez mettre un tableau d'éléments non-uniques, vous recevrez l'avertissement de React. Bien sûr, vous pouvez utiliser les index de tableau en tant que clés, mais c'est le antipattern.

<List items={items.map(item, i) => ({ content: item, key: i }))} /> 

Je recommande d'utiliser un ID unique d'entrée de journal ou quelque chose d'unique.

<List items={items.map(item, i) => ({ content: item.log, key: item.uuid }))} />