«Предупреждение: у каждого ребенка в списке должна быть уникальная ключевая опора».

Question

У меня есть код ниже, который я получаю сообщение об ошибке «Предупреждение: каждый ребенок в списке должен иметь уникальный ключ проп». Я проверил документы и, насколько я вижу, код должен быть в порядке, поскольку используемый ключ отличается для каждого значения и находится на самом внешнем элементе.

<FlatList
  style={styles.shiftsList}
  numColumns={1}
  data={shifts}
  renderItem={shift => (
    <View key={shift.item.BookingNo} style={styles.row}>
      <Button 
        title="Actions"
        onPress={() => console.log('Action Pressed: ${shift.item.BookingNo}')}
        />
      <Text style={styles.item}>{shift.item.Day}</Text>
      <Text style={styles.item}>{shift.item.Date}</Text>
      <Text style={styles.item}>{shift.item.ShiftType}</Text>
      <Text style={styles.item}>{shift.item.Location}</Text>
    </View> 
  )}
  keyExtractor={(item, index) => {item.BookingNo}}
/>

Edit: Shift Data
```const [shifts, setShifts] = useState([{BookingNo: 192, Day: 'Mon', Date: '21/02', ShiftType: 'Night', Start: '08:00:00', Finish: '20:00:00', Location: '23 Tiger woods row'}, {BookingNo: 256, Day: 'Mon', Date: '21/02', ShiftType: 'Night', Start: '08:00:00', Finish: '20:00:00', Location: '25 Tiger woods row'}, {BookingNo: 335, Day: 'Mon', Date: '21/02', ShiftType: 'Night', Start: 
'08:00:00', Finish: '20:00:00', Location: '29 Tiger woods row'}]);

Answer 1

Оказывается, это просто из-за того, что ключи должны быть строками.

Изменение keyExtractor={(item, index) => {item.BookingNo}} На keyExtractor={(item, index) => item.BookingNo.toString()}

Исправлено для меня

Answer 2

Я заметил, что для ключевой опоры вы используете shift.item.BookingNo, но для keyExtractor вы использовали только item.BookingNo.

Я предполагаю, что ваш keyExtractor должен выглядеть следующим образом:

keyExtractor={(shift, index) => {shift.item.BookingNo}}