导入和导出es6类

Question

I want to create ES6 class that reads data from a file and simply returns the content of the file, so I created a class called FileReader which has a constructor filePath and has a method called getFileContent

import fs from 'fs';
import path from 'path';

export class FileReader {

constructor(filePath) {
    this.filePath = filePath;
    fs.readFile(filePath, (err, data) => {
        if (err) {
            console.log(err);
        }

        this.fileContent = data;
    });
}

getFileContent(separator, columns) {
    console.log(this.fileContent);
}

}

I have a react component called OrderList I want to use FileReader inside componentDidMount method to read the content of the file

import React from 'react';
import {FileReader} from '../Utils/FileReader';

class OrdersList extends React.Component {

    constructor(props, context) {
        super(props, context);
    }

    componentDidMount() {
        FileReader reader = new FileReader('');
        reader.getFileContent(',' , []);
    }


    render() {

    }
}


export default OrdersList;

the problem that I'm getting an error Unexpected token reader so what's wrong with this approach ?

Answer 1

change this line: FileReader reader = new FileReader(''); to const reader = new FileReader('');

Answer 2

There are two problems in your code:

1. You're reading file content in the constructor, in the most of the cases, fileContent will be undefined, because fs.readFile is async function.
2. You're creating a reader without file path: FileReader reader = new FileReader('');

To fix described problems you should move the logic for reading file in class function and use callback or promise:

class OrdersList extends React.Component {
  constructor(filePath) {
    this.filePath = filePath;
 }

 getFileContent(separator, columns, cb) {
   fs.readFile(this.filePath, (err, data) => {
      if (err) {
        console.log(err);
      }
      cb(err, data) ;
    });
  }
}

In OrdersList you should use real file name and call function with callback to read file content:

class OrdersList extends React.Component {
    constructor(props, context) {
        super(props, context);
    }

    componentDidMount() {
        let reader = new FileReader(realFilePath);
        reader.getFileContent(',' , [], (err, content) => {
          // TODO: file content in content var
        });
    }
}