如何从 React 应用程序中的 csv 文件读取？

Question

我使用 create-react-app 的打字稿版本构建了一个超级基本的 React 应用程序。

在我的反应应用程序中，我想显示我添加的项目的csv文件中的数据。 想象一下src下的data.csv文件。

单击按钮时，我想触发一个函数来读取这个文件，使用一些数据进行计算等，然后打印结果。 实现这一目标的最佳方法是什么？ 我知道如何在 React 中点击按钮时触发一个函数，但不知道在该函数中做什么来读取文件和控制台记录要启动的数据。

重要- 我的项目中已经有了文件路径和文件，不需要用户输入来查找文件

我尝试在函数中使用 fs 之类的东西，但那些会抛出错误，我学会了它，因为它们是本机模块，不能在浏览器上使用。 那么什么可以用于浏览器呢？

Answer 1

fs仅适用于服务器，不适用于客户端。 浏览器没有（一般）访问文件系统的权限。

有几种选择：

1.公用文件夹

将 .csv 文件放入public文件夹，然后您可以像这样加载它：

function App() {
    const [ text, setText ] = useState();

    const load = function(){
        fetch( './csvInPublicFolder.csv' )
            .then( response => response.text() )
            .then( responseText => {
                setText( responseText );
            })
    };

    return (
        <div>
            <button onClick={ load }>load</button>
            <h2>text:</h2>
            <pre>{ text }</pre>
        </div>
    );
}

2. webpack 文件加载器

或者，如果文件必须在src文件夹中，

• 安装： yarn add file-loader --dev
• 添加一个webpack.config.js ：

module.exports = {
    module: {
        rules: [
            {
                test: /\.csv$/,
                use: [
                    {
                        loader: 'file-loader',
                    },
                ],
            },
        ],
    },
};

• 并导入 csv 文件，如：

import csvFilePath from './csvInSrcFolder.csv';
import { useState } from 'react';

function App() {
    const [ text, setText ] = useState();

    const load = function(){
        fetch( csvFilePath )
            .then( response => response.text() )
            .then( responseText => {
                setText( responseText );
            });
    };

    return (
        <div>
            <button onClick={ load }>load</button>
            <h2>text:</h2>
            <pre>{ text }</pre>
        </div>
    );
}

3.服务器

或者您可以创建自定义 server.js 并向服务器发送请求。 在服务器上，您可以访问文件系统 ( fs )。

4.解析csv

如果您不想自己解析文件内容，可以使用现有的 csv 解析器。 有人推荐papaparse （我没有自己的经验，哪些是好的）

import * as Papa from 'papaparse';
// ...
fetch( csvFilePath )
    .then( response => response.text() )
    .then( responseText => {
        // -- parse csv
        var data = Papa.parse(responseText);
        console.log('data:', data);
    });