React-native - ユニークキーに関するエラー

Question

ユニークキーを持つ必要があるというエラーが表示されるのはなぜですか？ This.props.numbersは数値の配列であり、以下のコードを使用して生成/表示を行います。私はまだ、しかし、エラーが発生します：配列またはイテレータの各子は、ユニークな 'キー'小道具を持つ必要があります。

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

Answer 1

Reactは、項目が変更されたかどうかを判断する方法を最適化し、すべてを再レンダリングする必要がないため、キーを提供したいと考えています。このようなキーを追加するだけです：

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> 
    ); 
    }