如何在 ReactJs 中导入 CSV 文件？

Question

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

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

我在这里看到的几个问题。

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

解决方案：

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

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;
}

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