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

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

GET 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

我对纯 JavaScript 应用程序没有太多经验，我通常使用 Rails 后端，但我建议专注于能够在浏览器中点击http://localhost:8080/text/fund_list.txt并获取一个回应。一旦你解决了这个问题，JavaScript 就会完成它的工作。