ReactJS App，无法从 CSV 文件中获取数据

Question

为了说明问题，我使用 create-react-app 工具（来自https://github.com/facebook/create-react-app）启动了一个新应用程序

我希望能够从 CSV 文件中加载数据，我正在使用 d3 中的 CSV 方法：

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

我在 App.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 文件位于 /src 文件夹中

Screenshot of console log

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

您需要在某处执行 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 路径。最可能的问题是由于路径不正确，您没有获取文件。

Answer 3

尝试先使用 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;