node.js - 如何使用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;

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

Answer 1

你快明白了。在函数内使用 setState 时要小心。该引用将重新绑定(bind)到函数范围。使用这个代替

 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