React Native从状态数组中删除多个项目

Question

我有一个存储使用相机拍摄的图片的目录。为了保存图片，我正在使用 RNFS。我正在使用 react-native-photo-browser。

画廊本身没有任何选项可以从画廊中删除项目。因此，我正在努力实现它。

export default class GridGallery extends React.Component{

    static navigationOptions = {
      title: 'Image Gallery',
    };

    constructor(props) {
        super(props)
        this.state = {
          filesList : [],
          mediaSelected: [],
          base64URI: null,
          galleryList: []
        }
    }

    componentDidMount(){
        FileList.list((files) => {

            if(files != null) {

                this.fileUrl = files[0].path;

                files = files.sort((a, b) => {

                    if (a.ctime < b.ctime)
                        return 1;
                    if (a.ctime > b.ctime)
                        return -1;
                    return 0;
                });

                this.setState({
                    filesList: files
                });
            }
            console.warn(this.state.filesList);
            this.getFiles();
        });
      }

    getFiles(){
      //console.warn(this.state.filesList);

      const ArrFiles = this.state.filesList.map((file) =>
        ({ caption : file.name, photo : file.path })
      );
      //console.warn(ArrFiles);

      this.setState({ galleryList : ArrFiles });
    }

    onActionButton = (media, index) => {
        if (Platform.OS === 'ios') {
          ActionSheetIOS.showShareActionSheetWithOptions(
            {
              url: media.photo,
              message: media.caption,
            },
            () => {},
            () => {},
          );
        } else {
          alert(`handle sharing on android for ${media.photo}, index: ${index}`);
        }
      };

      handleSelection = async (media, index, isSelected) => {
        if (isSelected == true) {
            this.state.mediaSelected.push(media.photo);
        } else {
         this.state.mediaSelected.splice(this.state.mediaSelected.indexOf(media.photo), 1);
        }
         console.warn(this.state.mediaSelected);
      }

      deleteImageFile = () => {

        const dirPicutures = RNFS.DocumentDirectoryPath;
        //delete mulitple files
        console.warn(this.state.mediaSelected);
        this.state.mediaSelected.map((file) =>
        // filepath = `${dirPicutures}/${file}`
          RNFS.exists(`${file}`)
          .then( (result) => {
              console.warn("file exists: ", result);

              if(result){
                return RNFS.unlink(`${file}`)
                  .then(() => {
                    console.warn('FILE DELETED');
                    let tempgalleryList = this.state.galleryList.filter(item => item.photo !== file);
                    this.setState({ galleryList : tempgalleryList })
                  })
                  // `unlink` will throw an error, if the item to unlink does not exist
                  .catch((err) => {
                    console.warn(err.message);
                  });
              }

            })
            .catch((err) => {
              console.warn(err.message);
            })
        )

     }

     renderDelete(){
       const { galleryList } = this.state;
       if(galleryList.length>0){
         return(
           <View style={styles.topRightContainer}>
           <TouchableOpacity style={{alignItems: 'center',right: 10}} onPress={this.deleteImageFile}>
             <Image
               style={{width: 24, height: 24}}
               source={require('../assets/images/ic_delete.png')}
             />
             </TouchableOpacity>
           </View>
         )
       }
     }

     goBack() {
       const { navigation } = this.props;
       navigation.pop;
     }

    render() {
      const { galleryList } = this.state;
        return (
            <View style={styles.container}>
                <View style={{flex: 1}}>
                <PhotoBrowser
                    mediaList={galleryList}
                    enableGrid={true}
                    displayNavArrows={true}
                    displaySelectionButtons={true}
                    displayActionButton={true}
                    onActionButton={this.onActionButton}
                    displayTopBar = {true}
                    onSelectionChanged={this.handleSelection}
                    startOnGrid={true}
                    initialIndex={0}
                />
                </View>
                {this.renderDelete()}
            </View>
        )
    }
}

图像示例列表：

[
    {
     photo:'4072710001_f36316ddc7_b.jpg',
      caption: 'Grotto of the Madonna',
      },
      {
        photo: /media/broadchurch_thumbnail.png,
        caption: 'Broadchurch Scene',
      },
      {
        photo:
          '4052876281_6e068ac860_b.jpg',
          caption: 'Beautiful Eyes',
      },
  ]

我的目标是，每当从状态 galleryList 中删除项目时，我需要刷新组件，以便从画廊中删除已删除的图像。因此，当我尝试使用过滤器来删除 galleryList 时，它会删除其他图像而不是已删除的图像：

let tempgalleryList = this.state.galleryList.filter(item => item.photo !== file);
                    this.setState({ galleryList : tempgalleryList })

MCVE -> 这是我的代码的缩小版本，您可以看到图片正在随机删除

- Jothi Kannan

---

它从目录中删除图像，但从UI中删除随机图像。 - Jothi Kannan

@DrewReese 不，forEach也是以同样的方式工作的。 - Jothi Kannan

map 方法返回一个具有相同元素数量的新数组（你的代码没有捕获到这一点），而 forEach 方法则为每个元素调用一个函数。当然，你现在使用的方式是相同的，工作方式也相同，因为你从未返回一个新值来映射。我只是想指出，你的代码可能应该使用 forEach 方法。 - Drew Reese

可能您有一个负责列出项目的组件，请尝试向该元素添加key属性。类似这样：this.state.galleryList.map(item => <ItemComponent key={item.photo} ...>)我猜这个逻辑在PhotoBrowser组件中，确保您放置了一个唯一的键。希望能帮到您。 - Leonardo Lobato

@LeonardoLobato，ListView中已经存在key属性。 - Jothi Kannan

Answer 1

问题

let tempgalleryList = this.state.galleryList.filter(item => item.photo !== file);
this.setState({ galleryList : tempgalleryList })

由于setState是异步的，所以在您的map函数的每次迭代中，this.state.galleryList不会被更新，因此最终更新的状态只会过滤掉一个选定的项目，而不是所有选定的项目。

解决方案

您可以使用setState的回调版本，该版本使用更新后的状态：

this.setState(prevState => ({ 
  galleryList : prevState.galleryList.filter(item => item.photo !== file), 
}));

替代方案

与其在每次迭代中调用setState，您可以在map函数之外调用它（尽管setState更新将被批处理，因此不会有显著的性能提升）：

this.setState(prevState => ({ 
  galleryList : prevState.galleryList.filter(item => !prevState.mediaSelected.includes(item.photo)), 
}));

您的代码存在其他问题

  this.state.mediaSelected.push(media.photo); 
} else {
  this.state.mediaSelected.splice(this.state.mediaSelected.indexOf(media.photo), 1);

在这里，您直接改变了状态。请改为以下方式：

this.setState(prevState => ({ 
  mediaSelected: prevState.mediaSelected.concat(media.photo) 
})); 

this.setState(prevState => ({ 
  mediaSelected: prevState.mediaSelected.filter(e => e != media.photo) 
})); 

- Roy Wang

---

评论不适合进行长时间的讨论；此对话已被移至聊天室。 - Samuel Liew