React Native - удалить элемент из массива с помощью ключа

Question

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

{this.state.ADImageArray.map((prop, key) => {

   return (
     <View style={PhotoStyles.imgThumbnailBlock}>
      <Image
        source={{uri: prop, isStatic: true}}
        style={PhotoStyles.imgThumbnail}
        />
        <TouchableOpacity onPress={this.removephoto} style={PhotoStyles.removePhotoLnk}>
          <Image
            source={require('../images/icons/ico-removeImg.png')}
            style={PhotoStyles.removePhotoImg}
          />
        </TouchableOpacity>
    </View>
   );
})}

Я хочу удалить изображениеиз массива всякий раз, когда нажимается оранжевая кнопка удаления.

У меня есть готовое действие this.removephoto - но интересно, как я могу удалить конкретное изображение в этом контексте - возможно ли удалить изображение по ключу?

Answer 1

Да, вы можете удалить элемент, используя его индекс.Таким образом, ваша функция removephoto может иметь вид

removephoto = (index) => {
   let result = this.state.ADImageArray.filter((item, key) => key != index)
   this.setState({ADImageArray: result})
}

, затем вы называете ее следующим образом:

   <TouchableOpacity onPress={() => this.removephoto(key)} style={PhotoStyles.removePhotoLnk}>

Или, в качестве альтернативы, вы можете удалить ссылку по ее URL, вам просто нужно изменить имплиментациюфункции removephoto () для функции ниже

removephoto = (url) => {
   let result = this.state.ADImageArray.filter((item, key) => item != url)
   this.setState({ADImageArray: result})
}

, а затем вы вызываете ее следующим образом

   <TouchableOpacity onPress={() => this.removephoto(prop)} style={PhotoStyles.removePhotoLnk}>

Answer 2

Вы можете передать key своему обработчику кликов следующим образом:

<TouchableOpacity onPress={() => this.removephoto(key)}>

Имейте в виду, что это будет создавать новую функцию каждый раз, поэтому из соображений производительности лучше привязать обработчик, например так:

<TouchableOpacity onPress={this.removephoto.bind(this, key)}>

Тогда ваш обработчик будет выглядеть примерно так:

removephoto = (key) => {
  const { ADImageArray } = this.state;
  this.setState({
    ADImageArray: ADImageArray.filter((item, i) => i !== key)
  });
}

Проверьте этот рабочий Экспо закуски