Question

我想从用户那里获取.csv文件并显示为表格。我需要对该表进行分页。我用于该反应分页表。首先，我从react-file-reader从.csv文件获得。我做到了，但显示错误。这是我的代码：

import React, { Component } from 'react';
import axios from 'axios';
import ReactFileReader from 'react-file-reader';
import { TablePagination } from 'react-pagination-table';

const sampleData = ``;
var result = [];
var data;
const Header = ["Name", "Department", "Designation", "Salary", "Joining Date" 
];

class Main extends Component {

constructor(props) {
super(props);
this.state={
  //csvData: null
  data: []
  };
 }

 handleFiles = files => {
var reader = new FileReader();
reader.onload = function(e) {
  var csv = reader.result;
  var lines = csv.split("\n");
  console.log(lines.length);
  var headers=lines[0].split(",");
  for(var i=1;i<lines.length;i++){
    var obj = {};
    var currentline=lines[i].split(",");
    for(var j=0;j<headers.length;j++){
      obj[headers[j]] = currentline[j];
    }
    result.push(obj);
  }  
  //return result; //JavaScript object
  result = JSON.stringify(result); //JSON
  console.log(result);
  // Use reader.result
  this.setState({
      //csvData: reader.result
      data: result
  })
  }.bind(this);
reader.readAsText(files[0]);
 }

 render() {
  return(
    <div className="Main">
      <h1>Upload Your CSV File</h1>
        <div>
          <ReactFileReader 
            multipleFiles={false}
            fileTypes={[".csv"]} 
            handleFiles={this.handleFiles}>
            <button className='btn'>Upload</button>
          </ReactFileReader>
          <TablePagination
        title="TablePagination"
        subTitle="Sub Title"
        headers={ Header }
        data={ data }
        columns="Name.Department.Designation.Salary.Joining Date"
        perPageItemCount={ 5 }
        totalCount={ data.length }
        arrayOption={ [["size", 'all', ' ']] }
    />
        </div>
  </div>
  );
 }

 }

 export default Main;

这是我的csv文件： https://drive.google.com/open?id=11vehP4swgVU5tRWB635kmDJd-4ZywGQaZ4kE5C4yaLo

如何在响应中与json文件分页？

0 个答案: