Как получить индекс кликаемых изображений, являющихся элементом массива, используя React native - PullRequest
Новая
       11

Как получить индекс кликаемых изображений, являющихся элементом массива, используя React native

2 голосов
/ 19 апреля 2020

Я сделал массив для получения 5 изображений от пользователей. Мне нужно предоставить функции для пользователя, чтобы динамически выбирать и удалять изображения из этого массива. В настоящее время я использую метод splice () для выполнения операции. но когда я выбираю изображение для удаления ... оно удаляет целые изображения на прессе 

renderImages = () => {
  let image = [];
  this.state.image.slice(0, 5).map((item, index) => {
    image.push(
      <View key={index} style={{ padding: 16 }}>
        <Image source={{ uri: item }} style={{ width: 60, height: 60 }} />
        <Icon
          name="window-close"
          size={15}
          color="#d3d3d3"
          style={{ position: "absolute", top: 5, right: 5 }}
          onPress={index => {
            this.setState({ image: this.state.image.splice(index, 1) });
          }}
        />
      </View>
    );
  });
  return image;
};

Ответы [ 2 ]

1 голос
/ 19 апреля 2020

Проблема здесь в том, что вы делаете мутацию непосредственно в состоянии, используя splice. Сначала нужно сделать клон состояния: 

renderImages = () => {
  let image = [];
  this.state.image.slice(0, 5).map((item, index) => {
    image.push(
      <View key={index} style={{ padding: 16 }}>
        <Image source={{ uri: item }} style={{ width: 60, height: 60 }} />
        <Icon
          name="window-close"
          size={15}
          color="#d3d3d3"
          style={{ position: "absolute", top: 5, right: 5 }}
          onPress={index => {
            let images = [...this.state.image]
            images.splice(index, 1)

            this.setState({ image: images });
          }}
        />
      </View>
    );
  });
  return image;
};
1 голос
/ 19 апреля 2020

Прежде всего не изменяйте состояние напрямую, об этом здесь . splice не возвращает заново обновленный массив, а возвращает массив удаленных элементов. 

renderImages = () => {
    let imagesToDisplay = [];
    const allImages = this.state.image;
    allImages.slice(0, 5).map((item, index) => {
        imagesToDisplay.push(
        <View key={index} style={{ padding: 16 }}>
    <Image source={{ uri: item }} style={{ width: 60, height: 60 }} />
        <Icon
        name="window-close"
        size={15}
        color="#d3d3d3"
        style={{ position: "absolute", top: 5, right: 5 }}
        onPress={index => {
            const image = this.state.image;
            image.splice(index, 1);
            this.setState({ image });
        }}
        />
        </View>
    );
    });
    return imagesToDisplay;
};
...