时间戳

首页 > 解决方案 > 使用 Papaparse 加载大型 CSV 文件不起作用（仅加载第一个块）

reactjs - 使用 Papaparse 加载大型 CSV 文件不起作用（仅加载第一个块）

问题描述

我想将带有 papaparse 的本地文件（客户端）加载到我的 React 应用程序中。不幸的是，它只加载第一个块而不是整个文件。我的文件包含大约 500 行，加载的行数永远不会超过 300 行。似乎在第一个块之后已经调用了完整的函数。

由于在文件完全加载后我需要导航到另一个页面，这让我很困扰，因为我需要完整的文件来获得更多功能。

我目前使用的代码：

    async getData() {
        const self = this;
        let dataList = [];
        Papa.parse(await this.fetchCsv(),
            {
                delimiter: ',',
                header: true,
                chunk: function (result, parser) {
                    parser.pause();
                    dataList = dataList.concat(result.data)
                    parser.resume();
                },
                complete: function () {
                    self.updateData(dataList);
                }
            });
    }

    async fetchCsv() {
        const response = await fetch(this.props.location.state.filename);
        const reader = response.body.getReader();
        const result = await reader.read();
        const decoder = new TextDecoder('utf-8');
        return decoder.decode(result.value);
    }

我也尝试过使用 step 而不是 chunk 但这并没有改变任何东西。谁能告诉我我在这里做错了什么以及为什么 papaparse 不加载整个文件？

标签： reactjscsvpapaparse

解决方案

您也许可以让 papaparse 做更多事情。它可以从远程服务器读取本地文件或流数据。

如果您只有大约 500 条记录，则可能不需要添加与流相关的复杂性。如果您只是在累积数据（看起来就是这样），则尤其如此。主要使用流式处理一次处理 1 条记录的数据。

如果你想流式传输，我建议使用“step”回调而不是“chunk”回调，这样你就可以处理每一行数据。

如果您使用 step 或 chunk 回调，那么您不需要完整的回调。如果它被调用，它将没有数据。

推荐阅读