如何在React Native中从FlatList中删除项目/索引? [英] How to remove a item/index from a FlatList in react native?

问题描述

我有一个呈现为视图的数据，并且遇到了有关如何删除已刷过的特定索引的问题

I have a data which is rendered as view and came across a issue on how to remove that particular index which is swiped

我使用FlatList的方式如下

I have used FlatList as follows

render() {
this.leftOpenValue =  Dimensions.get('window').width;
this.rightOpenValue = -Dimensions.get('window').width;

return (   

     <FlatList 
            data = {data}  
            keyExtractor = {data => data.id}                
            renderItem={ ({item}) => (

                <View style={styles.container}>
                    <SwipeView            
                        disableSwipeToRight = {false}
                        renderVisibleContent={() => 
                            <View>
                                <Text style={styles.text}> {item.title} </Text>     // This repeats 9 times (9 Index)              
                            </View>          
                        }
                        renderRightView={() => (
                            <View style={{flex:1, justifyContent: 'flex-end', alignItems: 'center', backgroundColor: 'red'}}>

                            </View>
                        )}

                        leftOpenValue = {this.leftOpenValue}
                        rightOpenValue = {this.rightOpenValue}
                        onSwipedLeft={() => alert("deleted")}
                        swipeDuration = {300}
                        swipeToOpenPercent = {40}
                        disableSwipeToRight = {true}
                    />
                </View>  

            )}
    />
);

我已经使用Swipeview进行滑动(react-native-swipeview)并删除了平面列表中的索引

I have used Swipeview to swipe (react-native-swipeview) and delete the index in flatlist

我对如何从flatList中删除项目有疑问

I have an issue on how to remove an item from flatList

推荐答案

一般模式是将唯一可识别的 id (键，索引等)传递给删除处理程序并过滤您的不等于该键的值的数据.这将返回一个没有该条目的新数组以存储在状态中.

General pattern is to pass a uniquely identifiable id (key, index, etc...) to your delete handler and filter your data on values that don't equal that key. This returns a new array without that entry to store in state.

deleteItemById = id => {
  const filteredData = this.state.data.filter(item => item.id !== id);
  this.setState({ data: filteredData });
}

render() {
  ...

  return (   
    <FlatList 
      data={data} // Assuming this is `this.state.data`
      keyExtractor={({item}) => item.id}                
      renderItem={({item}) => (
        <View style={styles.container}>
          <SwipeView
            ...
            onSwipedLeft={() => this.deleteItemById(item.id)}
            ...
          />
        </View>  
      )}
    />
  );
}

使用咖喱处理程序.通过将回调设置为在函数范围内包含 id 的事件处理程序，可以节省使用匿名回调的作用.

Using a curried handler. This saves using an anonymous callback by setting the callback to be an event handler with the id enclosed in the function scope.

deleteItemById = id => () => {
  const filteredData = this.state.data.filter(item => item.id !== id);
  this.setState({ data: filteredData });
}

render() {
  ...

  return (   
    <FlatList 
      data={data} // Assuming this is `this.state.data`
      keyExtractor={({item}) => item.id}                
      renderItem={({item}) => (
        <View style={styles.container}>
          <SwipeView
            ...
            onSwipedLeft={this.deleteItemById(item.id)}
            ...
          />
        </View>  
      )}
    />
  );
}

这篇关于如何在React Native中从FlatList中删除项目/索引?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！