如何从本机反应中的 FlatList 中删除项目/索引？

Question

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

我使用 FlatList 如下

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）并删除了 flatlist 中的索引

我有一个关于如何从 flatList 中删除项目的问题

原文由 Akash J 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 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 的事件处理程序来使用匿名回调。

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

原文由 Drew Reese 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

将项目的 Id 传递给 onSwipeLeft={this.deleteItem(item.id)} 并使用 setState 更新数据。

 state = {
    data: [{
      title: 'Hello world',
      id: 'hello'
    },{
      title: 'World says hello',
      id: 'say'
    }]
}

deleteItem = (id) => {

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

}

原文由 Junius L. 发布，翻译遵循 CC BY-SA 4.0 许可协议