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

Question

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

在我的 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);
    });