在本机反应中从数组中删除数据

Question

我正在选择文件并将数据推送到数组中，但是如果数组中已经存在所选数据，我想将其删除。

我正在推送我的数据：

_setSelectedFile(file_uri, file_key){
    let selectedFiles = [...this.state.selectedFiles];
    selectedFiles.push({ file_uri: file_uri, file_key: file_key });
    this.setState({ selectedFiles });
}

我的数组的输出是这样的：

[
    {
        file_uri: "ph://9F983DBA-EC35-42B8-8773-B597CF782EDD/L0/001", 
        file_key: "2"
    },
    {
        file_uri: "ph://CC95F08C-88C3-4012-9D6D-64A413D254B3/L0/001", 
        file_key: "5"
    }
]

我将file_key 存储为稍后删除时的参考。我看到了这个答案Delete item from state array in react，但不确定如何应用它，因为讨论中的问题是指一维数组。

Answer 1

我尝试了一些技巧，显然它适用于我的情况。希望这对其他人也有帮助。

_setSelectedFile(file_uri, file_key){
    var isExist = false;
    var selectedFileKey = null;

    let selectedFiles = [...this.state.selectedFiles];

    if(this.state.selectedFiles != null){
      this.state.selectedFiles.map((data, i)=>{
        if(data.file_key === file_key){
          isExist = true;
          selectedFileKey = i;
        }
      })
    }

    if(isExist == true){
      selectedFiles.splice(selectedFileKey, 1);
      this.setState({selectedFiles: selectedFiles});
    } else {
      selectedFiles.push({ file_uri: file_uri, file_key: file_key });
      this.setState({ selectedFiles });
    }
  }

所以我做映射并检查数据是否已经存在然后分配isExist = true并存储键值selectedFileKey = i。

将isExist 设置为true 我可以继续从我的数组中删除数据。