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

我注意到，对于关键道具，您正在使用shift.item.BookingNo，但是对于keyExtractor，您仅使用了item.BookingNo。

我的猜测是您的keyExtractor应该如下所示：

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

Answer 2

事实证明，这仅仅是由于键必须是字符串。

改变 keyExtractor={(item, index) => {item.BookingNo}} 进入 keyExtractor={(item, index) => item.BookingNo.toString()}

为我修复了

“警告：列表中的每个孩子都应该有一个唯一的键道具”

2 个答案: