React Native FlatList删除指定项异常：点击删除按钮清空全部条目

嘿，我帮你定位到问题啦！你遇到的“点删除就全删”是几个小细节没对应上，咱们一步步修正：

问题1：删除时传错了参数 #

你在TouchableOpacity的点击事件里传的是item.index，但你的timeSlots数组里的条目根本没有index这个属性，而且你要依据唯一主键来删除条目，也就是你存在数组里的primaryKey。

把这行代码：

<TouchableOpacity onPress={() => this.deleteAppointment(item.index)} >

改成：

<TouchableOpacity onPress={() => this.deleteAppointment(item.primaryKey)} >

问题2：删除函数里的过滤条件不匹配 #

你的deleteAppointment函数里用item.id !== id来过滤，但你的timeSlots条目里存储唯一标识的字段是primaryKey，不是id，所以过滤逻辑根本找不到要删的条目，最后会把所有条目都过滤掉（因为所有item的id都不存在，等于全不匹配，返回空数组）。

把删除函数改成：

deleteAppointment = (id) => {
  const filteredData = this.state.timeSlots.filter(item => item.primaryKey !== id);
  this.setState({ timeSlots: filteredData });
}

问题3：FlatList的keyExtractor配置错误 #

你现在的keyExtractor试图从item里取id字段，但item里没有这个字段，而且用index作为key在列表有增删操作时容易引发渲染问题，建议用唯一的primaryKey来做key：

把这行：

keyExtractor={({ id }, index) => index.toString()}

改成：

keyExtractor={(item) => item.primaryKey.toString()}

修正后的完整核心代码片段 #

// 删除函数
deleteAppointment = (id) => {
  const filteredData = this.state.timeSlots.filter(item => item.primaryKey !== id);
  this.setState({ timeSlots: filteredData });
}

// FlatList部分
<FlatList
  data={this.state.timeSlots}
  keyExtractor={(item) => item.primaryKey.toString()}
  renderItem={({ item, index }) => {
    return (
      <View style={styles.containerList}>
        <View style={styles.dateList}>
          <Text style={{ fontWeight: "bold" }}>Date: </Text>
          <Text style={styles.textTime}>{item.apptdate} ({item.primaryKey})</Text>
        </View>
        <View style={styles.row}>
          <View>
            <Text style={{ fontWeight: "bold" }}>Start Time:</Text>
            <Text style={styles.textTime}>{item.appttime}</Text>
          </View>
          <View>
            <Text style={{ fontWeight: "bold" }}>End Time:</Text>
            <Text style={styles.textTime}>{item.endTime}</Text>
          </View>
          <TouchableOpacity onPress={() => this.deleteAppointment(item.primaryKey)} >
            <Feather name="trash" style={styles.icon} />
          </TouchableOpacity>
        </View>
      </View>
    );
  }}
/>

这样改完之后，点击某个条目的删除按钮就只会删除对应的那条数据，不会把整个列表清空啦～

内容的提问来源于stack exchange，提问作者Beep Boop