React Native FlatList 删除项答案

【问题标题】：React Native FlatList Delete ItemReact Native FlatList 删除项
【发布时间】：2019-12-26 09:47:36
【问题描述】：

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

我还没有找到有关此问题的其他帖子，因此我们将不胜感激。

下面提供的代码 sn-p：

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

截图如下：

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案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>
    );
}}

【讨论】：

您好，我尝试在 renderItem 中添加index，它解决了错误问题。但是，它无法删除该项目。

【解决方案2】：

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

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

希望对你有帮助

【讨论】：

嗨，我尝试在 renderItem 中添加index，它解决了错误问题。但是，它无法删除该项目。

【解决方案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>
                            );
                        }}

【讨论】：