React Native FlatList 删除项目问题

Question

On my FlatList I only want to delete specific items that I have selected to delete, however it always ends up deleting all the item from the list as soon as the delete icon/button is pressed.

For example: If I add 3 items to my Flatlist, and delete the 2nd item, all the 3 items get deleted from the Flatlist. Whereas, I clearly wanted to delete only the 2nd item.

I am new with React Native and still learning. So, any help regarding this issue will be highly appreciated.

Code snippet provided below:

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>

Answer 1

just go through with your method

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

In above method you are passing item.index in method But in deleteAppointment() you have compared with item.id .

we have two ways to remove item by index or by value

By index solution=>

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

By value solution=>

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