Question

在我的FlatList上，我只想删除选择删除的特定项目，但是一旦按下删除图标/按钮，它总是最终从列表中删除所有项目。

例如：如果我将3个项目添加到我的单位列表中，然后删除第二个项目，则这3个项目都将从单位列表中删除。而我显然只想删除第二项。

我是React Native的新手，还在学习。因此，将非常感谢您对此问题的任何帮助。

下面提供的代码段：

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

只需按照您的方法进行操作

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

在上述方法中，您在方法中传递了item.index，但是在deleteAppointment()中，您与item.id进行了比较。

我们有两种方法可以删除按索引或按值

通过索引解决方案=>

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

反应本机FlatList删除项目问题

1 个答案: