首页 > 解决方案 > 如何从文件列表中删除特定文件?

问题描述

我的目标是从文件列表中删除一个特定的文件,但是当我想删除最后一个文件而不是所需的文件时。

这是代码:

 {this.state.myFiles.map(file => (
        <p key={file.name}>
          {file.name} ({file.size} bytes)
          <button
            className={"material-icons delete"}
            onClick={() => this.handleRemoveFile(file.name)}
          >
            Remove file
          </button>
        </p>))}

从文件列表中删除特定文件:

handleRemoveFile = (fileName) => {
const myFiles = [...this.state.myFiles];
 myFiles.splice(myFiles.indexOf(fileName), 1)
        this.setState({ myFiles })
}

我无法删除特定文件,它正在从文件列表中删除最后一个文件,有人可以帮我从文件列表中删除特定文件吗?

谢谢!提前。

标签: javascriptreactjs

解决方案


map给你第二个参数,它是数组的索引。

 {this.state.myFiles.map((file,index) => (
        <p key={file.name}>
          {file.name} ({file.size} bytes)
          <button
            className={"material-icons delete"}
            onClick={() => this.handleRemoveFile(index)}
          >
            Remove file
          </button>
        </p>))}

现在您可以使用此索引来过滤文件

handleRemoveFile = (fileIndexToRemove) => {
   const updatedFiles = this.state.myFiles.filter((file, index) => index !== fileIndexToRemove)
   this.setState({ myFiles: updatedFiles  })
}

推荐阅读