如何使用reactjs将导入的csv数据显示在表格中？

Question

我有一个上传按钮，可以将CSV文件导入到我的Reactjs应用程序中。使用React文件阅读器，我可以成功地上传数据(CSV)，但现在我想将CSV数据显示在表格中。我认为这个https://github.com/marudhupandiyang/react-csv-to-table可能会对我有所帮助，但我不知道如何使用它。以下是我的代码：

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;

请帮忙。这对我非常重要。

- vnaysngh

---

请问你能否对你的代码进行缩进/格式化？ - Pedro Gabriel Lima

你有检查控制台的错误信息吗？ - Pedro Gabriel Lima

控制台中没有错误。我只是想知道如何使用那个CSV数据将其放入表格中，使用这个链接https://github.com/marudhupandiyang/react-csv-to-table，它需要示例数据。现在要在这里实现，我需要那个CSV数据，但我不明白如何在handleFiles范围之外使用它。 - vnaysngh

你的代码似乎缺少几个元素。你需要：1）使用文件读取器接收到的数据设置组件的状态，并且2）渲染CsvToHtmlTable组件。 - Charlie Weems

修改完成。但是它仍然无法正常工作，也没有给出任何错误信息。 - vnaysngh

@CharlieWeems你能帮我一下吗？ - vnaysngh

Answer 1

你差不多懂了。在函数内部使用setState时要小心，因为这个引用将重新绑定到函数作用域。请使用this代替。

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

你可以在这里测试它。 https://codesandbox.io/s/qlj338vnkj

- Kunukn

---

现在，如果我想要在上传CSV文件后更改路由并在另一个组件中显示表格，应该如何做呢？ - vnaysngh

将结果保存在redux中 - Roman Nozhenko

Answer 2

您可以使用这个方法将 csv 数据展示在 React 表格中。您可以使用 papaparse 库。

import Papa from 'papaparse';

然后获取CSV文件

fetchCsv() {
    return fetch('/data/data.csv').then(function (response) {

      let reader = response.body.getReader();
      let decoder = new TextDecoder('utf-8');

      return reader.read().then(function (result) {
        return decoder.decode(result.value);
      });
    });
  }
    async getCsvData() {
    let csvData = await this.fetchCsv();
    let results = Papa.parse(csvData, { header: true })
    this.getData(results)

  }
  

https://github.com/manaspandey45/react-csv-data-table

- Manas