React Native - 使用键从数组中删除项目

Question

我有一组图像 uri，它们在 UI 中显示如下：

{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}>