Javascript 导入和导出es6类

我想创建一个ES6类，它从文件中读取数据并简单地返回文件的内容，因此我创建了一个名为

FileReader

的类，它有一个构造函数

filePath

和一个名为

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);
}

}

我有一个名为

OrderList

的react组件，我想在

componentDidMount

方法中使用

FileReader

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;

---

问题是我遇到了一个错误

意外的令牌读取器

，那么这种方法有什么问题？

更改这行：

FileReader=newfilereader（“”）到
常量读取器=新文件读取器（“”）
更改此行：
FileReader=newfilereader（“”）到
常量读取器=新文件读取器（“”）
您的代码中有两个问题：

您正在构造函数中读取文件内容，在大多数情况下，
fileContent
将是未定义的，因为
fs.readFile
是异步函数
您正在创建一个没有文件路径的读卡器：
FileReader=newfilereader（“”）

若要修复所述问题，应移动读取类函数中文件的逻辑，并使用回调或承诺：

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) ;
    });
  }
}

在OrdersList中，您应该使用真实的文件名和带有回调的调用函数来读取文件内容：

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
        });
    }
}

代码中有两个问题：

您正在构造函数中读取文件内容，在大多数情况下，
fileContent
将是未定义的，因为
fs.readFile
是异步函数
您正在创建一个没有文件路径的读卡器：
FileReader=newfilereader（“”）

若要修复所述问题，应移动读取类函数中文件的逻辑，并使用回调或承诺：

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) ;
    });
  }
}

在OrdersList中，您应该使用真实的文件名和带有回调的调用函数来读取文件内容：

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
        });
    }
}

似乎工作得很好，但你能详细说明一下为什么在我的电脑里不工作吗case@NaderHisham因为
FileReader
部分毫无意义。如果它是一个变量，那么应该用
var/let/const
声明它。记住，让consts而不是vars:Dseems完美地工作，但是您能详细说明为什么它在我的case@NaderHisham因为
FileReader
部分毫无意义。如果它是一个变量，那么应该用
var/let/const
声明它。记住，让const不是vars:db但在这种情况下，我们没有使用在另一个文件中创建的
FileReader
类为什么？您正在创建它：
let reader=new FileReader（realFilePath）
，并使用它方法：
reader.getFileContent
，但在本例中，我们没有使用在另一个文件中创建的
FileReader
类为什么？您正在创建它：
let reader=new FileReader（realFilePath），并使用它的方法：
reader.getFileContent
此代码存在概念设计问题。您尝试在构造函数中读取内容，但构造函数之外的任何人都不知道内容何时完成读取，并且对于
getFileContent（）
实际有效。这在实践中根本无法可靠地工作（或者根本不能）。需要重新设计概念，可能需要使用承诺，以便
getFileContent（）
的调用方使用异步调用约定来了解内容何时可用。此代码存在概念设计问题。您尝试在构造函数中读取内容，但构造函数之外的任何人都不知道内容何时完成读取，并且对于
getFileContent（）
实际有效。这在实践中根本无法可靠地工作（或者根本不能）。这个概念需要重新设计，可能需要使用承诺，以便
getFileContent（）
的调用者使用异步调用约定来知道内容何时可用。