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';

Answer 5

我假设您使用Webpack作为捆绑程序。

得到“ 404未找到”的原因是，您需要配置Webpack以便将文件捆绑到网站托管的构建文件夹中。

将其移动到/public文件夹中是可行的，因为Webpack已配置为捆绑/public文件夹中的所有文件，因为它通常是项目的入口点（因为这可能是create-react-应用）。

create-react-app的人们也很聪明，他们发现，如果它是.txt扩展名文件，他们会将它们捆绑到构建文件中的/text文件夹中，就像任何{ {1}}或.jpg文件将捆绑到.png文件夹中。

请注意，如果您将许多文件导入到项目中，则需要使用特殊的webpack加载器，但是您也可以使用webpack插件将文件复制到您的包中，然后按照编程方式进行读取。

因此，一旦将其移动到该文件夹，您的应用程序实际上就可以在/images托管的build文件夹中找到它！

Answer 6

使用HTML5 FileReader API，您可以轻松读取任何文件。请看下面的代码：

function App() {
  const [json, setJson] = useState("");
  let fileInputRef = React.createRef();

  return (
    <div className="App">
      <p>{json}</p>
      <input
        type="file"
        ref={fileInputRef}
        style={{ display: "none" }}
        onChange={async e => {
          const reader = new FileReader();
          reader.onload = function() {
            const text = reader.result;
            setJson(text);
          };
          reader.readAsText(e.target.files[0]);
        }}
        accept=".json,application/json"
      />
      <button
        onClick={() => {
          fileInputRef.current.click();
        }}
      >
        Upload JSON file
      </button>
    </div>
  );
}

这是工作中的Demo

reactJS并读取一个文本文件

6 个答案: