Question

我正在用reactjs创建一个函数，该函数接收一个txt文件并读取并转换为json对象。

因此，当我读取文件时，我会调用csvJSON函数，但是我在控制台中收到：

未捕获的TypeError：this.csvJSON不是函数在FileReader.reader.onload

我尝试过的事情：

import React, { Component } from 'react';

export default class FileInput extends Component {

    constructor(){
        super();
        this.openFile = this.openFile.bind(this);
        this.csvJSON = this.csvJSON.bind(this)
    }

    openFile(event){
        let input = event.target;
        let reader = new FileReader();
        reader.onload = function(){
            console.log(reader.result.substring(0, 200));
            this.csvJSON(reader.result)
        };
        reader.readAsText(input.files[0]);
    }

    csvJSON(csv){

        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
        console.log(JSON.stringify(result)); //JSON
    }

    render() {
      return(
        <div>
            <input type='file' accept='text/plain' onChange={this.openFile} />
        </div>
      );
    }
  }

我也尝试过：

openFile(event){
        let input = event.target;
        let reader = new FileReader();
        reader.onload = this.csvJSON(reader.result);
        reader.readAsText(input.files[0]);
    }

但是如果我控制reader.result，我的函数将收到null。我如何将读取器的加载数据传递给其他功能？

Answer 1

您位于函数内部，因此this现在具有不同的含义，因此您需要做的是在该函数中绑定this语句或仅创建一个变量

var self = this

然后将其用作：

self.csvJSON(reader.result)

我也想：

openFile(event) {
    let input = event.target;

    let reader = new FileReader();

    reader.onload = () => {
        console.log(reader.result.substring(0, 200));

        this.csvJSON(reader.result)
    };

    reader.readAsText(input.files[0]);
}

未捕获的TypeError：this.csvJSON不是FileReader.reader.onload的函数

1 个答案: