Node.js 如何使用reactjs将导入的csv数据显示到表中？

我有一个上传按钮，只将CSV文件导入我的Reactjs应用程序。我可以使用React文件读取器成功上传数据（CSV），但现在我想将CSV数据显示到表中。我想这可以帮助我，但我不知道如何在这里使用它。下面是我的代码：

import React, { Component } from 'react';
import ReactFileReader from 'react-file-reader';
import { CsvToHtmlTable } from 'react-csv-to-table';
import './App.css';

class App extends Component {

 constructor(props){
  super(props);
  this.state = {
    csvData: ''
  };
}

handleFiles = files => {
     var reader = new FileReader();
     reader.onload = function(e) {
     // Use reader.result
       this.setState({
         csvData: reader.result
       })
     }
   reader.readAsText(files[0]);
}

render() {
return (
    <div>
         <ReactFileReader handleFiles={this.handleFiles} fileTypes={'.csv'}>
                 <button className='btn'>Upload</button>
          </ReactFileReader>
          <CsvToHtmlTable
               data={this.state.csvData}
               csvDelimiter=","
               tableClassName="table table-striped table-hover"
           />
   </div>

    );
  }
}

export default App;

import React，{Component}来自'React'；
从“react文件读取器”导入react文件读取器；
从“react csv to table”导入{CsvToHtmlTable}；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
csvData:“”
};
}
handleFiles=文件=>{
var reader=new FileReader（）；
reader.onload=函数（e）{
//使用reader.result
这是我的国家({
csvData:reader.result
})
}
reader.readAsText（文件[0]）；
}
render（）{
返回(
上传
);
}
}
导出默认应用程序；

---

请帮忙。这对我来说很重要。

你差点就明白了。在函数中使用setState时要小心。此引用将重新绑定到函数范围。用这个代替

 handleFiles = files => {
    let reader = new FileReader();
    reader.onload = () => {
      // Use reader.result
      this.setState({
        csvData: reader.result
      })
    }
    reader.readAsText(files[0]);
  }

你可以在这里测试。

---

请缩进/格式化您的代码。您是否检查了控制台中的错误消息？控制台中没有错误。我只是想知道如何使用这个需要样本数据的链接将csv数据放入表中。现在要在这里实现，我需要csv数据，但我不知道如何在handleFiles范围之外使用它。您的代码似乎缺少几个元素。您需要1）使用文件读取器接收的数据设置组件的状态，2）渲染

CsvToHtmlTable

component.done进行更改。它仍然不起作用。现在，如果我希望在上传csv后立即更改路由并在另一个组件中显示该表，我应该如何做？将结果保存在redux中