Generieren sequenzieller IDs für ReactJS-Schlüssel

Question

Reagieren erfordert, dass Sie ein eindeutiges key-Attribut für Elemente in einem Array haben. Die React docs empfehlen die Verwendung eines id aus Ihren Daten. Wenn Sie keine id haben, können Sie den Array-Index als "letzten Ausweg" verwenden, mit der Einschränkung, dass die Verwendung eines Index zu Leistungsproblemen führen kann, wenn die Elemente neu geordnet werden können. Ich hatte auch einige ärgerliche Probleme beim Erstellen eines Arrays von Elementen aus mehreren Quellen-Arrays und mehrere Aufrufe an .map(), jeweils mit verschiedenen Transformationen, in welchem ​​Fall die Array-Indizes sowieso nicht eindeutig sein werden.

Ich habe angefangen, die folgende Text werfen in meine Komponenten:

constructor(props) { 
    super(props); 
    this.getId = this.getId.bind(this); 
    this.id = 0; 
} 

getId() { 
    return this.id++; 
} 

, die wie so verwendet werden können:

render() { 
    const items = this.props.greetings.map(text => ({ 
     <li key={this.getId()}>{text}</li> 
    })); 

    return (
     <ul> 
      {items} 
     </ul> 
    ); 
} 

Das ist einfach, schnell und hat nicht die Probleme dass die Verwendung des Array-Index hat, aber ich weiß nicht, ob es irgendwelche Probleme mit diesem Ansatz oder bessere Alternativen, die ich übersehen habe. Ist das eine schlechte Übung? Gibt es andere einfache Möglichkeiten zum Generieren key s, die nicht die Array-Indexprobleme haben?

Answer 1

Dies ist, was die Dokumentation auf Reconciliation auf Tasten zu sagen hat

In der Praxis wird einen Schlüssel zu finden, hart in der Regel nicht. Das Element, das Sie anzeigen möchten, hat möglicherweise bereits eine eindeutige ID, sodass der Schlüssel nur aus Ihren Daten stammen kann. Wenn das nicht der Fall ist, können Sie eine neue ID-Eigenschaft zu Ihrem Modell hinzufügen oder einige Teile des Inhalts Hash, um einen Schlüssel zu generieren. Der Schlüssel muss nur unter seinen Geschwistern eindeutig sein und nicht global eindeutig sein. Als letzte Möglichkeit können Sie den Index des Elements im Array als Schlüssel übergeben. Dies kann gut funktionieren, wenn die Artikel nie neu geordnet werden, aber die Reihenfolge der Nachbestellungen gering ist.

Also ich denke, Sie folgen dem vorgeschlagenen Ansatz.