FileReader APIを介してファイルを読み込んでjsonオブジェクトに変換します

Question

私はReactjsプロジェクトに取り組んでいます。プロジェクトでは、ローカルからcsvファイルを読み込んでjsonオブジェクトに変換する必要があります。私はcsvtojsonノードパッケージを使用して、csvファイルをjsonオブジェクトに変換しています。以下のコードを参照してください：

import React from 'react'; 
import ReactDOM from 'react-dom'; 

var objects; 

var ReadFile = React.createClass({ 
    readFile:function(){ 
     var file = this.refs.file.files[0]; 
     var reader = new FileReader(); 
     reader.onload = function(evt){ 
      var resultText = evt.target.result; 
      objects = this.csvToJson(resultText); 
      console.log(objects); 
     }.bind(this); 
     var newFile = file.slice(0,5000); 
     reader.readAsText(newFile); 
    }, 
    csvToJson:function(csvString){ 
     var Converter = require("csvtojson").Converter; 
     var converter = new Converter({}); 
     converter.fromString(csvString, function(err,result){ 
      //When i console log the result it is working but when i return The result: 
      // i am getting a undefined error 
      //console.log(result); 
      return result; 
     }); 
    }, 
    render:function(){ 
     return (
     <input type="file" ref="file" onChange={this.readFile} /> 
    ); 
    } 
}); 

ReactDOM.render(<ReadFile />,document.getElementById('container')); 

私は未定義のエラーを取得していますcsvToJsonファイルから結果をログコンソール

。私が間違ってやっていることを誰かが私を案内してくれますか？

Answer 1

import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import ReactFileReader from 'react-file-reader'; 

export default class CsvRead extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    handleFiles = files => { 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
    // Use reader.result 
    var csv = reader.result; 
    var lines = csv.split("\n"); 
    var result = []; 
    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); 
    } 
    reader.readAsText(files[0]); 
} 

    render() { 
    return (
     <ReactFileReader handleFiles={this.handleFiles} fileTypes={'.csv'}> 
     <button className='btn'>Upload</button> 
     </ReactFileReader> 
    ); 
    } 
} 

これは正常に動作します。