如何从 React Native 的 FlatList 中删除一个项目/索引？

Question

如何从 React Native 的 FlatList 中删除一个项目/索引？

14

我有一段数据，已经被呈现为视图，并遇到了一个问题，如何删除已划掉的特定索引。我已经使用如下的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

3

您写了哪些代码来尝试删除列表或数据中的某一项？通常的模式是将一个唯一标识符（键、索引等）传递给您的“删除项目”回调函数，并在数值上过滤掉不等于该键的数据。这将返回一个新数组，不包含该条目，您需要将其存储回状态中。 - Drew Reese

3个回答

3

将项目的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

嘿，谢谢，这对我很有效。我还有另一个问题，会导致问题，请你看一下这个问题：this。 - Oliver D

通过这种方法，目标项（要删除的项）后面的图像项会在平面列表上重新绘制。有没有更好的方法来避免这个问题？ - CrackerKSR

0

先执行普通的对象删除，然后过滤您的状态以进行清理。

 let _rem = this.state.data;
 delete  _rem[index_no];
 this.setState({data: this.state.data.filter(args=>args!==index_no)});

- Revelation A.F

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Drew Reese · Accepted Answer

通常的模式是将一个唯一标识符 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>  
      )}
    />
  );
}