React Native FlatList 删除项目

Question

我想从 FlatList 中删除项目。但是，的解决方案不适用于我的代码。当我运行我的代码时，我收到诸如“index is not defined”之类的错误。

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

下面提供的代码片段：

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

截图如下：

Answer 1

我认为您需要在 renderItem 中添加索引 { item, index }

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

Answer 2

在 map 函数中渲染时，它也提供索引，所以尝试添加它。

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

希望对您有所帮助

Answer 3

确定已修复。在可触摸的 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>
                            );
                        }}

React Native FlatList 删除项目

React Native FlatList Delete Item

react-native

react-native-flatlist