Как импортировать файл CSV в ReactJs? - PullRequest
Новая
       31

Как импортировать файл CSV в ReactJs?

0 голосов
/ 25 апреля 2020

Я пытаюсь импортировать CSV-файл, который находится в папке с именем data на том же уровне, что и эта функция. Я пытался включить решение , которое я нашел здесь, но не повезло, и я не знаю, что мне нужно изменить.

enter image description here

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

1 Ответ

2 голосов
/ 25 апреля 2020

Несколько проблем, которые я вижу здесь.

  1. Когда вы делаете fetch('data/mycsv.csv'), вы по существу делаете запрос на http://localhost:3000/data/mycsv.csv. Проверьте вкладку n / w, и вы увидите, что ответом является ваш html. React сначала загружает вашу страницу root, а затем проверяет дальнейшие маршруты.
  2. Некоторые ошибки кодирования, такие как - вы не вызывали fetchCsv fun inside GetData function. Также вам нужно дождаться fetchCsv.

Решение:

Переместите папку data, в которой находится CSV-файл, в publi c папку и внесите исправления в ваш код. 

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

Я протестировал приведенный выше код в своем локальном компьютере, и он отлично работает.

...