Question

我想创建从文件读取数据的ES6类，并简单地返回文件的内容，因此我创建了一个名为FileReader的类，它有一个构造函数filePath并且有一个名为{的方法{1}}

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方法中使用FileReader来读取文件的内容

componentDidMount

问题是我收到错误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;所以这种方法出了什么问题？

Answer 1

将此行：FileReader reader = new FileReader('');更改为const reader = new FileReader('');

Answer 2

您的代码中存在两个问题：

您正在构建器中读取文件内容，在大多数情况下，fileContent将是未定义的，因为fs.readFile是异步函数。
您正在创建没有文件路径的阅读器：FileReader reader = new FileReader('');

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

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

导入和导出es6类

2 个答案: