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

Answer 2

您可以像这样将key传递给您的点击处理程序