Как удалить элемент / индекс из FlatList в реагировать родной?

Question

Как удалить элемент / индекс из FlatList в реагировать родной?

1

У меня есть данные, которые отображаются как представление и столкнулся с проблемой, как удалить этот конкретный индекс, который сильно ударил

Я использовал 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, чтобы смахнуть (response-native-swipeview) и удалить индекс в плоский список

У меня есть проблема, как удалить элемент из flatList

Akash J 19 дек. 2018, в 17:37

Источник

3

Какой код вы написали, чтобы попытаться удалить элемент для вашего списка / данных? Общая схема заключается в передаче уникально идентифицируемого идентификатора (ключа, индекса и т. Д.) В ваш обратный вызов для удаления элемента и фильтрации ваших данных по значениям, которые не равны этому ключу. Это возвращает новый массив без этой записи, и вы хотите сохранить его обратно в ваше состояние.
Drew Reese 19 дек. 2018, в 16:36

Теги:

javascript

react-native

2 ответа

Ещё вопросы

Какой код вы написали, чтобы попытаться удалить элемент для вашего списка / данных? Общая схема заключается в передаче уникально идентифицируемого идентификатора (ключа, индекса и т. Д.) В ваш обратный вызов для удаления элемента и фильтрации ваших данных по значениям, которые не равны этому ключу. Это возвращает новый массив без этой записи, и вы хотите сохранить его обратно в ваше состояние.

Drew Reese · Answer 1 · 2018-12-19T15-57-00.000Z

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

julekgwa · Answer 2 · 2018-12-19T14-43-00.000Z

Передайте идентификатор элемента в 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)
   })

}