在 React 中添加和删除 N 个文件输入

我正在构建允许用户上传 N 个数据文件的东西。为此，我添加了一个按钮，用于创建额外的文件上传选项。这是通过渲染函数中的一个简单的 for 循环完成的（有一个选择选项，只有在满足某些条件时才会出现，这是“mergeColumnSelection”变量，您可以忽略它，但我将其包括在内，以防它以某种方式结束相关）：

let renderedEnrichedDataFields = [];
for(let i = 0; i < this.state.enrichedData.length; i++) {
  let mergeColumnSelection = ""
  if(this.state.enrichedData[i] !== null) {
      mergeColumnSelection = <div className="form-item__select form-item">
        <label className="form-label" htmlFor="add-target-owner">Merging Column</label>
        <div className="form-item__container">
          <select onChange={(e) => {this.setEnrichedMergeColumn(e, i)}} defaultValue={this.state.csvColumns[0]}>
            {mainDataColumns}
          </select>
        </div>
      </div>
  }

  renderedEnrichedDataFields.push(
    <div className="form-group">
      <button onClick={() => {this.removeEnrichmentData(i)}} type="button" className="modal-close">
        <Icon name="close" />
      </button>
      <div className="form-item">
      <label className="form-label" htmlFor="add-target-csv">Enrichment Dataset</label>
        <input 
          className="csv-input" 
          type="file" 
          accept="text/csv" 
          onChange={(e) => {this.acceptNewEnrichedDataFile(e, i)}} 
        />
      </div>
      {mergeColumnSelection}

    </div>
  )
}

基本上，每次按下按钮时，都会将一个新元素推送到状态中的丰富数据数组中。这会导致应用程序呈现额外的文件输入。当用户上传文件时，数组中的占位符元素将替换为文件。当用户最终提交表单时，将提交一组文件，这很好。

然而！我在获得一个干净的实现来移除这些输入字段的能力时遇到了很多麻烦。功能

removeEnrichmentData(index) {
  let enrichmentData = this.state.enrichedData
  let enrichedMergeColumns = this.state.enrichedMergeColumns;

  enrichmentData.splice(index, 1);
  enrichedMergeColumns.splice(index, 1)

  this.setState({enrichedData: enrichmentData, enrichedMergeColumns: enrichedMergeColumns});
}

正如您所看到的，这将获取所选输入的索引，然后将其从生成 for 循环的数组中拼接起来。从数组中拼接出合适的文件，文件输入个数正确。但是，显示的文件名存在问题。图片会有所帮助：

在这里您可以看到一个示例，其中有人准备上传三个文件，health、cluster 和 starbucks

现在我选择从列表中删除集群项（项 2）。它从 state 的文件列表中删除，只留下 health 和 starbucks。然而，for 循环简单地运行两次并删除最后一个项目——这意味着健康和集群似乎是剩下的两个文件，尽管实际上它们是健康和星巴克

我想过将 JSX 块本身移动到 state 中，这样我就可以专门针对我想要删除的 JSX 输入元素 - 但是这种方法的成功有限，并且读到将 JSX 放入 state 是不可取的。React 并没有真正内置的方法可以轻松删除特定输入，而且我无法在文件输入中设置默认值，因此我无法轻松地将各个输入与其对应的状态联系起来。

感觉应该是这么简单的问题，我很卡。任何帮助表示赞赏！