React Native FlatList 删除项目

哔哔声

我想从 FlatList 中删除项目。但是，这里的解决方案不适用于我的代码。当我运行我的代码时，我收到诸如“索引未定义”之类的错误。

我还没有找到关于这个问题的其他帖子，所以任何帮助将不胜感激。

下面提供的代码片段：

   export default class FrCreateScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            //new timeSlots
            timeSlots: [],
        }
    }

    setEndTime = (event, appointmentEndTime, textEndTime) => {
        appointmentEndTime = appointmentEndTime || this.state.appointmentEndTime;
        textEndTime = textEndTime || moment(appointmentEndTime).format('h:mm a').toString();
        this.setState({
            showEndTime: Platform.OS === 'ios' ? true : false,
            appointmentEndTime,
            textEndTime,

            timeSlots: [
                ...this.state.timeSlots,
                {
                    apptdate: this.state.textAppointmentDate,
                    appttime: this.state.textAppointmentTime,
                    endTime: textEndTime,
                }
            ],
        });
    }

    deleteDateTime = (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 }) => {
                            return (
                                <View style={styles.containerList}>
                                    ...
                                        <TouchableOpacity onPress={() => this.deleteDateTime(index)}>
                                            <Feather name="trash" style={styles.icon} />
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            );
                        }}
                    />
                </View>
            </ScrollView>
        )
    };
};

截图如下：

哔哔声

好的固定。在可触摸的 onPress 上，参数应该是 ' item.index' 而不是 ' index'。

这是正确的代码：

renderItem={({ item,index }) => {
                            return (
                                <View style={styles.containerList}>
                                    ...
                                        <TouchableOpacity onPress={() => this.deleteDateTime(item.index)}>
                                            <Feather name="trash" style={styles.icon} />
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            );
                        }}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。