Удалить элемент из FlatList в React Native

Я использую функцию удаления, как показано ниже, используя весь код здесь:

Шаг 1. Отрисовка представления и добавление TouchableOpacity, как показано ниже:

<TouchableOpacity onPress={() => this.deleteAddress(itemData.item._id)}>
                <Icon name="trash" style={{paddingLeft: 10,paddingRight:10}} size={20} color="red" />
              </TouchableOpacity>

Шаг 2: Добавьте окно подтверждения, как показано ниже:

deleteAddress(id) {
    Alert.alert(
      'Delete Address',
      'Are you sure want to delete this address ?',
      [
        {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
        {text: 'OK', onPress: () => this.deleteAddressDetail(id)},
      ],
      { cancelable: false }
    )
  }

Шаг 3: вызовите свой API или что-нибудь здесь:

deleteAddressDetail(id) {
  //Delete api or anything here
  //after that call your list so updated state data will render
}

Ваш обновленный код плоского списка:

<FlatList
        data={this.state.addressList}
        keyExtractor={this._keyExtractor}
        extraData={this.state}
        renderItem={this.renderRowItem}
      />

Используйте элемент рендеринга, как показано ниже:

renderRowItem = (itemData) => {
  <TouchableOpacity onPress={() => this.deleteAddress(itemData.item._id)}>
                    <Icon name="trash" style={{paddingLeft: 10,paddingRight:10}} size={20} color="red" />
                  </TouchableOpacity>
}

Ну, вы можете удалить желаемый элемент на основе его index.start с изменением flatList

<FlatList
          style={{ paddingBottom: 5, paddingTop: 10 }}
          data={this.state.imagesAddFile}
          keyExtractor={(y, z) => z.toString()}
          renderItem={({ item,index }) => (
            <SelectedLayout
             onPress={(index) =>this.removeItemFromList(index)} 
             ImageName = {item.name}
            />
          )}
        />

вы должны обернуть компонент SelectedLayout внутри TouchableOpacity, чтобы реализовать onPress или как вам нравится. если бы вы могли предоставить мне его код, я мог бы вам показать.

Теперь в реализации removeItemFromList мы будем использовать splice, чтобы удалить его из состояния imagesAddFile.

removeItemFromList(index){
   let newimagesAddFile = this.state.imagesAddFile;
   newimagesAddFile.splice(index,1); //to remove a single item starting at index
   this.setState({imagesAddFile:newimagesAddFile})
}

Поскольку код в вашем вопросе не завершен, я предполагаю, что ваш SelectedLayout компонент может иметь TouchableOpacity или что-то подобное для обработки касания (для выбора или удаления изображения). По сути, вы хотите изменить источник данных вашего Flatlist (т.е. массив this.state.imagesAddFile) из компонента SelectedLayout.

Создайте функцию в компоненте, содержащем плоский список, который получает имя изображения (или URL-адрес изображения в зависимости от структуры вашего объекта изображения), и эта функция должна удалить это изображение из вашего состояния (imagesAddFile). Теперь передайте эту функцию как опору своему SelectedLayout и вызовите эту функцию из компонента SelectedLayout в onPress вашего Touchable **** в SelectedLayout. Вы можете использовать методы lodash, если они очень удобны и хорошо написаны. (Вы бы использовали их много)

Ваш компонент может выглядеть примерно так:

handleImageTap = (imageName) => {
   const { imagesAddFile } = this.state;
   this.setState({
      imagesAddFile: _.filter(imagesAddFile,imageObj => 
       imageObj.name !== imageName);
   })
}

render() {
  return(
   <FlatList
     style={{ paddingBottom: 5, paddingTop: 10 }}
     data={this.state.imagesAddFile}
     keyExtractor={(y, z) => z.toString()}
     renderItem={({ item }) => (
       <SelectedLayout
        ImageName = {item.name}
        handleImageTap = {this.handleImageTap}
       />
     )}
  />
  )

Линия

_.filter(imagesAddFile,imageObj => imageObj.name !== imageName);

представляет собой не что иное, как сокращение JSX внутри метода фильтра lodash, который принимает массив imagesAddFile, выполняет итерацию по нему и возвращает новый массив, удаляя объект изображения, имя которого совпадает с именем изображения. Пожалуйста, обратитесь к документу для лучшего разъяснения.

В идеале вы должны сначала проверить, существует ли изображение в массиве или нет. Также я бы посоветовал не играть с именем изображения, использовать что-то уникальное, например id или imageUrl.