如何从本地文件获取数据到我的 React 应用程序中？

Question

我有一个我想解析的 txt 文件，并且有一些数据用于填充 React 应用程序的一部分。 我一直在用头撞墙，因为据我所知，我不能在 React 中使用 fs（因为它在浏览器环境中运行），也不能使用 AJAX 查看本地文件。

我理解原因，并且我理解围绕 AJAX 和本地文件的安全问题。 但是，有什么方法可以让我将这些文本输入到我的应用程序中？

正如我所说，有问题的组件的代码如下，我已经知道在这里使用 fs 是行不通的）。

import React from 'react';
import PropTypes from 'prop-types';
import fs from 'fs';

function StopList (props) {
var firstInstance = new RegExp(`^${props.subway}`);
var stops = [];
function stopNames() {
    fs.readFile('..utils/stops.txt', null, (err, data) => {
        if (err) {
            return console.log(err);
        } else {
            var stopData = data.split('\n');
        }
        stopData.map((line) => {
            if (firstInstance === line.charAt(0)) {
                var firstCommas = line.indexOf(',,');
                var secondCommas = line.indexOf(',,', firstCommas);
                stops.push(line.slice(firstCommas + 2, secondCommas));
            }
        });
    });
}
stopNames();
return (
    <select>
        {
            stops.map((stop) => {
                <option key={stop}>
                    {stop}
                </option>
            })
        }
    </select>
)
}
StopList.PropTypes = {
    stops: React.PropTypes.array.isRequired,
    subway: React.PropTypes.string.isRequired
};

export default StopList;

编辑：有问题的文件已经在http://web.mta.info/developers/data/nyct/subway/google_transit.zip在线。 问题是我不知道如何获取并在线阅读它，因为它位于 zip 目录中。

Answer 1

你用什么来捆绑你的应用程序？ 如果您使用的是 Webpack，则可以使用raw-loader并将 txt 文件直接导入到您的应用程序中。

原始加载器： https : //github.com/webpack-contrib/raw-loader

然后你可以简单地： import txt from 'file.txt';

无论哪种方式，您都需要从本地文件系统中提取数据并使用某种方法将其包含在您的包中。

Answer 2

你可以使用：

<input type=file></input> 

并让用户手动将文件提供给您的应用程序。

Answer 3

由于您在评论中提到您在项目中使用了 create-react-app，目前最好的解决方案是使用名为Raw.Macro的 babel 插件。

此插件允许您访问文件的内容，而无需 create-react-app eject 。 提供真正优雅的解决方案，无需任何样板代码。

注意：有一个小缺点，当文件更改时你必须重新启动你的 webpack 开发服务器，因为文件的内容是在构建过程中被嵌入的。

    import raw from 'raw.macro';

    function foo(){
        const jsonContent = raw('../utils/stops.json');
        console.log(jsonContent);
    }

Answer 4

看看 PapaParse

http://papaparse.com/docs#local-files

它具有读取和解析本地 CSV 文件的能力，我认为这正是您要寻找的。

还有 jsonfile，但它可能在幕后使用 fs。 https://github.com/jprichardson/node-jsonfile

Answer 5

我在加载本地 csv 时遇到了类似的令人头疼的问题。 第一个挑战是让 webpack 在构建中包含本地文件。 在 Webpack 5 中做到这一点的最佳方法是使用资产模块：

webpack.config.js

...
{
  test: /\.(csv)$/i,
  type: 'asset',
}

第二个挑战是将数据封装到一个变量中。 正如丹所说，最好的方法不是 AJAX，而是使用命名导入。

import blob from './foo.csv';
console.log(blob)

---
data:text/csv;base64,U3RhdGUsQWJ...

blob现在是一个字符串。 您需要提取代表文件内容的编码值并从 base64 解码。

const encodedData = blob.split(",")[1] 
const data = atob(encodedData)
console.log(data)

---
header1,header2
val1,val2

现在可以将data提供给 csv 解析器（例如 PapaParse）。