ReactJS Приложение не может получить данные из файла CSV

Question

Чтобы проиллюстрировать проблему, я запустил новое приложение, используя инструмент create-реагировать на приложение (из https://github.com/facebook/create-react-app)

Я хочу загружать данные из файлов CSV , Я использую метод CSV из d3:

  csv('data.csv').then(data => {
      console.log(data)
  });

Я добавил эту функцию в файл приложения. js:

import React from 'react';
import './data.csv';
import { csv } from 'd3'

function App() {

    csv('data.csv').then(data => {
        console.log(data)
    });

    return (
       <div className="App">
       </div>
    );
};

export default App;

Каждый раз, когда я пытаюсь это сделать, код возвращает Массив кода Index. html (на рисунке) вместо данных в файле CSV. Я уверен, почему это происходит?

Файл CSV находится в папке / sr c

Снимок экрана журнала консоли

Answer 1

Позвольте мне сначала объяснить, что пошло не так. В вашем коде вы пытаетесь получить доступ к файлу, которого там нет. И я не говорю об импорте. После импорта, когда вы используете имя файла в функции csv, у него нет правильного пути.

используйте этот оператор импорта - импортируйте данные из './data.csv';

после того, как приложение скомпилировано, данные имеют URL-адрес файла. Теперь, если вы сохраните данные в файле console.log, вы получите это - / static / media / data.csv

Примечание. Путь может отличаться в зависимости от инструмента, используемого для компиляции. Я использую пряжу.

Теперь передайте данные в функцию csv следующим образом:

csv(data).then(response => { 
    console.log(response)
})

Надеюсь, это поможет вам понять, как это работает. См. Приведенный ниже код для структуры вызова.

function App(){
    console.log(data);  
    csv(data).then(response => {
        console.log(response)
    })
    return (
        <div className="App">Test</div>
    );
}

Если у вас есть какие-либо вопросы или вопросы, не стесняйтесь обращаться.

Приветствия:)

Answer 2

Попробуйте сначала импортировать ваш набор данных с использованием метода React, а затем проанализировать его с помощью функции D3.csv

import React from 'react';
import data from  './data.csv';
import { csv } from 'd3';

function App() {
      csv(data, function(error, data) {
         if (error) throw error;
         console.log(data);
       });

    return (
       <div className="App">
       </div>
    );
};

export default App;

Answer 3

Вам необходимо выполнить действие csv где-то в возвращаемой части функции, например

import React from 'react';
import './data.csv';
import { csv } from 'd3'

function App() {



    return (
       <div className="App">
        {csv('data.csv').then(data => {
        console.log(data)
// perform all here
    });}
       </div>
    );
};

export default App;

, также вам не нужно импортировать csv, и правильный путь csv должен быть указан в функции csv. Наиболее вероятная проблема - вы не получаете файл из-за неверного пути.