添加已从数组中删除的最后一项

Question

我正在使用“输入类型 = 文件多个”，并且我确实列出了选择的文件，并且可以选择从该列表中删除所选文件。我遇到的问题是我无法添加最后一项我删除了。 假设您要添加已删除的最后一个文件（对于错误，您已删除该文件并且必须添加），我不能这样做，我不能添加该文件

 handleFile = e  => {
    let file = e.target.files   
    for(let i = 0,f; f = file[i]; i ++){
          this.list.push(`${f.name } (${f.size})`)
          this.setState({fileArray: [ ...this.list]})
    }
}
handleRemoveFile = e => {
    this.setState({fileArray: this.state.fileArray.filter(f => {
         return f !== e
        })
    })
     this.list = this.list.filter(f => {
        return f !== e
      })
}

// in render I have
<input id="file-upload" type="file" multiple onChange={this.handleFile}/>
<div>
{this.state.fileArray != undefined&& this.state.fileArray.length>0 ?      
  this.state.fileArray.map((f,index) => {
        return 
    <div style={{display: 'flex'}} key={index}>
           <p> { `${f}`} </p>
           <i className={`fa fa-check ${s.check}`}></i>
      <span onClick={()=>this.handleRemoveFile(f)} 
            style={{marginLeft:'1%'}}>
         <i className={`fa fa-trash-alt ${s.trash}`}></i>
      </span>
    </div>
}) : ''}

Answer 1

你说的我不太明白，但是我相信你在点击Remove后过滤文件（隐藏它）时遇到了一些问题，对吧？

问题是您正在过滤比较对象：

this.setState({
  fileArray: this.state.fileArray.filter(f => {
    return f !== e
  })
})

比较f和e是个坏主意，主要是这部分代码：

this.list = this.list.filter(f => {
  return f !== e
})

因为e 对象是this.state.fileArray 的一部分，所以e 不存在于list 中。

我推荐两种方法：

1. 好方法：检查f 和e 是否具有可用于比较的独特属性。例如：f.id !== e.id 或 f.fileName !== e.fileName
2. 丑陋的：不是将file对象发送到handleRemove函数，而是发送index。所以，你应该做<span onClick={()=>this.handleRemoveFile(index)}，然后：

handleRemoveFile = index => {
    this.setState({fileArray: this.state.fileArray.filter((f, i) => {
         return f=index !== i
        })
    })
     this.list = this.list.filter((f, i) => {
        return index !== i
      })
}