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

【问题标题】：React Native - Delete item from array with KeyReact Native - 使用键从数组中删除项目
【发布时间】：2020-01-26 03:29:13
【问题描述】：

我有一组图像 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 操作 - 但想知道如何在这种情况下删除特定图像 - 是否可以按键删除图像？

【问题讨论】：

标签： reactjs react-native ecmascript-6

【解决方案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}>

或者，您可以通过链接删除链接，您只需将 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}>

【讨论】：

【解决方案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)
  });
}

看看这个工作Expo snack

【讨论】：