Javascript 读取多个文件以导出为一个CSV

我正试图通过表单读取多个文件。战后我想将它们存储在一个CSV文件中

当前状态中的数据为空，因为FileReader尚未完成读取，但我似乎无法找到一个优雅的选项。有人能帮忙吗

到目前为止，我的代码是：

class App extends Component {

  constructor() {
    super()

    this.state = { data : null, files : null }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange = (event) => {
    this.setState({
      files: event.target.files
    })
  }
  handleSubmit = (event) => {
    event.preventDefault()
    this.retrieveFiles()
    this.exportToCSV()
  }

  retrieveFiles = () => {
    this.setState({ data: [] })
    Array.from(this.state.files).forEach(
      (file) => {
        var reader = new FileReader()
        reader.filename = file.name
        reader.onloadend = this.readFiles
        reader.readAsText(file, "UTF-8")
      }
    )
  }
  readFiles = (event) => {
    this.setState((state) => {
      var parser = new DOMParser();
      var data = state.data.concat([{
        filename : event.target.filename, 
        content: parser.parseFromString(event.target.result, "text/xml")
      }])
      return { data : data }
    })
  }
  exportToCSV = (data) => {
    console.log(this.state.data)
  }

  render() {
    return (
      <div className="xbpm-tracer">
        <form onSubmit={this.handleSubmit}>
          <h1>Upload file(s)</h1>
          <label>
            <input type="file" name="file" onChange={this.handleChange} multiple />
          </label>
          <label>
            <input type="submit" name="submit" value="Upload" />
          </label>
        </form>
      </div>
    )
  }
}

export default App;

类应用程序扩展组件{
构造函数（）{
超级（）
this.state={data:null，files:null}
this.handleChange=this.handleChange.bind（this）
this.handleSubmit=this.handleSubmit.bind（this）
}
handleChange=（事件）=>{
这是我的国家({
文件：event.target.files
})
}
handleSubmit=（事件）=>{
event.preventDefault（）
此文件名为.retrieveFiles（）
这是exportToCSV（）
}
检索文件=（）=>{
this.setState（{data:[]}）
Array.from（this.state.files）.forEach(
（文件）=>{
var reader=new FileReader（）
reader.filename=file.name
reader.onloadend=this.readFiles
reader.readAsText（文件“UTF-8”）
}
)
}
readFiles=（事件）=>{
this.setState（（状态）=>{
var parser=新的DOMParser（）；
var数据=state.data.concat([{
文件名：event.target.filename，
内容：parser.parseFromString（event.target.result，“text/xml”）
}])
返回{data:data}
})
}
exportToCSV=（数据）=>{
console.log（this.state.data）
}
render（）{
返回(
上载文件
)
}
}
导出默认应用程序；

所有文件在列方面是否具有相同类型的数据集？如果是，则可以将所有文件的数据合并到一个数组中，然后使用该数组将其保存在csv中。您可以使用任何库，如exceljs或将数组转换为csv，以csv格式保存数据。就是这样。你会怎么做？