React Native FlatList Deleting Items issue

В моем FlatList я хочу удалить только определенные элементы, которые я выбрал для удаления, однако всегда заканчивается удаление всего элемента из списка, как только нажимается значок / кнопка удаления.

Например: Если я добавлю 3 элемента в свой плоский список и удалю второй элемент, все 3 элемента будут удалены из плоского списка. В то время как я явно хотел удалить только 2-й элемент.

Я новичок в 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>

react-native javascript react-native-flatlist
person Beep Boop    schedule 30.12.2019    source источник
comment
Можете ли вы поделиться своим кодом в закуске выставки и проверить там.   -  person Gaurav Roy    schedule 30.12.2019
comment
вот весь код Если есть что-то, требующее пояснений, дайте мне знать.   -  person Beep Boop    schedule 30.12.2019
comment
Мне не нужен был весь код, только определенные части, и он работал.   -  person Gaurav Roy    schedule 30.12.2019
comment
Также не забудьте добавить extraData = {this.state} для обновления FlatList после удаления   -  person Orgil    schedule 30.12.2019

Ответы (1)


arrow_upward
2
arrow_downward

просто пройди свой метод

<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 });
    }
person Asha    schedule 30.12.2019
comment
Спасибо за помощь и особенно за то, что все подробно объяснили. Я следил за вашим индексным решением, и оно работает, как задумано. Теперь я могу удалить выбранный элемент, не удаляя все в списке. - person Beep Boop; 30.12.2019
comment
@BeepBoop лучше использовать поле id в качестве ключа для проблем с производительностью, когда используется индекс, индексы будут меняться каждый раз, когда вы удаляете элемент. - person SuleymanSah; 30.12.2019
comment
@SuleymanSah да. В своем основном проекте я использую поле id. Спасибо. - person Beep Boop; 30.12.2019