React-native - Fehler über eindeutigen Schlüssel

Question

Warum bekomme ich immer noch den Fehler, einen eindeutigen Schlüssel zu haben? This.props.numbers ist ein Array von Zahlen und sie erzeugen/zeigen mit dem folgenden Code Ordnung. Ich bekomme jedoch immer noch den Fehler: Jedes Kind in einem Array oder einem Iterator sollte eine eindeutige 'Schlüssel' Stütze haben.

generateGrid() { 
    return this.props.numbers.map((sq) => 
     <TouchableWithoutFeedback> 
     <Square key={sq} style={{ height: 30, width: 30 }}> 
      <Text> 
      {sq} 
      </Text> 
     </Square> 
     </TouchableWithoutFeedback> 
    ); 
    } 

Answer 1

React möchte, dass Sie einen Schlüssel bereitstellen, weil er optimiert, wie er bestimmt, ob Elemente geändert wurden und nicht alles neu gerendert werden müssen. Fügen Sie einfach einen Schlüssel wie folgt hinzu:

generateGrid() { 
    return this.props.numbers.map((sq, i) => 
     <TouchableWithoutFeedback key={i} > //Here 
     <Square key={sq} style={{ height: 30, width: 30 }}> 
      <Text> 
      {sq} 
      </Text> 
     </Square> 
     </TouchableWithoutFeedback> 
    ); 
    }