Javascript 响应本机平面列表删除项目问题

在我的平面列表上，我只想删除我选择要删除的特定项目，但它总是在按下删除图标/按钮后立即从列表中删除所有项目

例如：如果我将3个项目添加到平面列表中，并删除第2个项目，则所有3个项目都将从平面列表中删除。然而，我显然只想删除第二项

我是新来的，而且还在学习。因此，我们将非常感谢您在这个问题上提供的任何帮助

下面提供的代码片段：

addDateTimeAppt = () => {
    let self = this;
    AsyncStorage.getItem('my_token').then((keyValue) => {
        console.log('Freelancer addDateTimeApt() (keyValue): ', keyValue);
        axios({
            method: 'post',
            url: Constants.API_URL + 'appointment_f/create_appointment/',
            data: {
                app_date_start: self.state.textAppointmentDate,
                start_time: self.state.textAppointmentTime,
                end_time: self.state.textEndTime,
            },
            headers: {
                'X-API-KEY': Constants.API_KEY,
                'Authorization': keyValue,
            },
        }).then(function (response) {
            self.setState({
                f_id_rn: response.data.freelancer_id,
                start_date_rn: response.data.app_date_start,
                end_date_rn: response.data.app_date_end,
                primary_key_id: response.data.id,

                timeSlots: [
                    ...self.state.timeSlots,
                    {
                        apptdate: self.state.textAppointmentDate,
                        appttime: self.state.textAppointmentTime,
                        endTime: self.state.textEndTime,
                        primaryKey: response.data.id,
                    }
                ],
            });
            console.log(response.data);
        }).catch(function (error) {
            console.log(error);
        });
    });
}

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

render() {
    return (
        <ScrollView>
            <View>
                <FlatList
                    data={this.state.timeSlots}
                    keyExtractor={({ id }, index) => index.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.index)}
                                    >
                                        <Feather name="trash" style={styles.icon} />
                                    </TouchableOpacity>
                                </View>
                            </View>
                        );
                    }}
                />
            </View>
        </ScrollView>

addDateTimeAppt=（）=>{
让自我=这个；
AsyncStorage.getItem（'my_token'）。然后（（keyValue）=>{
log（'自由职业者addDateTimeApt（）（keyValue）：'，keyValue）；
axios({
方法：“post”，
url:Constants.API_url+'appointment_f/create_appointment/'，
数据：{
应用程序\日期\开始：self.state.textAppointmentDate，
开始时间：self.state.textAppointmentTime，
结束时间：self.state.textEndTime，
},
标题：{
“X-API-KEY”：Constants.API\u KEY，
“授权”：keyValue，
},
}).然后（功能（响应）{
自我状态({
f_id_rn:response.data.freegorer_id，
开始日期：response.data.app\u date\u start，
结束日期：response.data.app\u date\u end，
主键id:response.data.id，
时隙：[
…self.state.timeslot，
{
apptdate:self.state.textAppointmentDate，
appttime:self.state.textAppointmentTime，
endTime:self.state.textEndTime，
primaryKey:response.data.id，
}
],
});
console.log（response.data）；
}).catch（函数（错误）{
console.log（错误）；
});
});
}
删除约会=（id）=>{
const filteredData=this.state.timeslot.filter（item=>item.id！==id）；
this.setState（{timeSlots:filteredData}）；
}
render（）{
返回(
index.toString（）}
renderItem={（{item，index}）=>{
返回(
日期：
{item.apptdate}（{item.primaryKey}）
开始时间：
{item.appttime}
结束时间：
{item.endTime}
this.deleteAppointment（item.index）}
>
);
}}
/>

只需使用您的方法即可

<TouchableOpacity onPress={() => this.deleteAppointment(item.index)}>
    <Feather name="trash" style={styles.icon} />
</TouchableOpacity>

按值解决方案=>

<TouchableOpacity onPress={() => this.deleteAppointment(index)}>
    <Feather name="trash" style={styles.icon} />
</TouchableOpacity>

deleteAppointment = (index) => {
    let filteredData = this.state.timeSlots
    filteredData.splice(index, 1) //delete item at the given index
    this.setState({ timeSlots: filteredData });
}

<TouchableOpacity onPress={() => this.deleteAppointment(item.id)}>
        <Feather name="trash" style={styles.icon} />
    </TouchableOpacity>

    deleteAppointment = (id) => {
        let index = this.state.timeSlots.findIndex(x => x.id == id)
        let filteredData = this.state.timeSlots
        filteredData.splice(index, 1) //delete item at the given index
        this.setState({ timeSlots: filteredData });
    }

this.deleteAppointment（item.id）}>
删除约会=（id）=>{
让index=this.state.timeslot.findIndex（x=>x.id==id）
让filteredData=this.state.timeSlots
splice（索引，1）//删除给定索引处的项
this.setState（{timeSlots:filteredData}）；
}

你能在世博快餐中分享你的代码吗？我会在那里查一下。如果有什么需要澄清的，请告诉我。我不想要所有的代码，只需要特定的部分，它就可以工作。另外，别忘了添加额外数据={this.state}对于删除后的更新平面列表，感谢您的帮助，特别是感谢您对所有内容的详细解释。我已经按照您的索引解决方案进行了操作，并按预期工作。我现在可以删除所选项目，而不必删除列表中的所有内容。@BeepBoop在使用索引时，最好使用id字段作为性能问题的关键字d、 每次删除项目时，索引都会更改。@SuleymanSah是的。对于我的主项目，我使用的是id字段。谢谢。