如何在 ReactJs 中导入 CSV 文件？

Question

我正在尝试导入一个 csv 文件，该文件位于与此函数同级的名为 data 的文件夹中。我试图合并我在此处找到的，但没有成功，我不知道我需要修改什么。

getData.jsx

import React, { useState, useEffect } from 'react';
import Papa from 'papaparse';

export default function GetData(artist) {
    const data = Papa.parse(fetchCsv);
    console.log(data);
    return data;
}

async function fetchCsv() {
     const response = await fetch('data/artist_data.csv');
     const reader = response.body.getReader();
     const result = await reader.read();
     const decoder = new TextDecoder('utf-8');
     const csv = decoder.decode(result.value);
     return csv;
 }

Answer 1

我在这里看到的问题很少。

当您执行 fetch('data/mycsv.csv') 时，您实际上是在向 http://localhost:3000/data/mycsv.csv 发出请求。检查 n/w 选项卡，您将看到返回的响应是您的 html。 React 首先加载您的根页面，然后进一步检查路由。
一些编码错误，例如 - 您没有在 GetData 函数中调用 fetchCsv 函数。您还需要等待 fetchCsv.

解法：

将包含 csv 文件的 data 文件夹移动到 public 文件夹 并更正您的代码。

import React from 'react';
import Papa from 'papaparse';

async function GetData(artist) {
    const data = Papa.parse(await fetchCsv());
    console.log(data);
    return data;
}

async function fetchCsv() {
    const response = await fetch('data/mycsv.csv');
    const reader = response.body.getReader();
    const result = await reader.read();
    const decoder = new TextDecoder('utf-8');
    const csv = await decoder.decode(result.value);
    console.log('csv', csv);
    return csv;
}

我已经在我的本地测试了上面的代码，它工作正常。

如何在 ReactJs 中导入 CSV 文件？

How to import a CSV file in ReactJs?

javascript

csv

reactjs

papaparse