Question

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

我理解为什么，并且我理解围绕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文件导入您的应用。

Raw loader：https://github.com/webpack-contrib/raw-loader

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

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

Answer 2

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

此插件可让您访问文件的内容，而无需创建反应应用弹出。提供了非常优雅的解决方案，没有任何样板代码。

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

    import raw from 'raw.macro';

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

Answer 3

看看PapaParse

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

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

还有jsonfile，但可能会使用引擎盖下的fs。 https://github.com/jprichardson/node-jsonfile

Answer 4

您可以使用：

<input type=file></input>

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

Answer 5

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

webpack.config.js

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

第二个挑战是将数据封装到一个变量中。正如 Dan 所说，最好的方法不是 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）。

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

5 个答案: