reactJS并读取文本文件

Question

我有一个reactJS应用程序，我需要在一个大文本文件中读取并使用文件中的数据来填充一些数组。我遇到了一些代码示例，我正在尝试实现此代码：

        readTextFile = file => {
        var rawFile = new XMLHttpRequest();
        rawFile.open("GET", file, false);
        rawFile.onreadystatechange = () => {
            if (rawFile.readyState === 4) {
                if (rawFile.status === 200 || rawFile.status == 0) {
                    var allText = rawFile.responseText;
                    console.log("allText: ", allText);
                    this.setState({
                        fundData: allText
                    });
                }
            }
        };
        rawFile.send(null);
    };

通过执行以下代码行调用代码：

this.readTextFile("../text/fund_list.txt");

当我执行该应用程序时，我收到以下错误消息：

获取http://localhost:8080/text/fund_list.txt 404（未找到）

这就是我的应用程序结构：

readTextFile函数在account_balanc.js代码中，我试图在文本文件/text/fund_list.txt中读取。该文件确实存在，所以显然我没有正确引用该文件，但我不知道为什么。

我试过this.readTextFile（“../ text / fund_list.txt”）和this.readTextFile（“./ text / fund_list.txt”）;但都没有奏效。我甚至尝试将fund_list.txt移动到/ screens文件夹中，并将函数调用更改为this.readTextFile（“fund_list.txt”）;但我仍然收到404错误消息。

有什么想法吗？

谢谢。

Answer 1

我将fund_list.txt文件移动到public / text文件夹中（在我创建它之后）并将函数调用更改为this.readTextFile（“./ text / fund_list.txt”）;

我看到这是一个发布的解决方案，但后来删除了帖子（我不知道为什么）所以我不能感谢发布它的用户。但这解决了我的问题。

Answer 2

尝试...

const file = require("../text/fund_list.txt");

然后

this.readTextFile(file);

Answer 3

我没有很多纯javascript应用程序的经验，我通常使用rails后端，但我建议专注于能够在浏览器中点击http://localhost:8080/text/fund_list.txt并获得响应。一旦你解决了它看起来像javascript将做的事情。

Answer 4

您可以使用webpack raw loader并直接将.txt文件导入组件。

首先，安装raw-loader：

npm i -D raw-loader

其次，将加载器添加到webpack配置中：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: 'raw-loader'
      }
    ]
  }
}

然后，直接将.txt导入您的组件：

import txt from './file.txt';