我正在尝试在我的反应App.js文件中使用d3-request库来导入和解析.csv文件中的数据。当我将结果数据输出到控制台时,它将从App.js文件而不是从目标csv文件返回一行数组。我错过了什么?
App.js
import React, {Component} from 'react';
import {csv} from 'd3-request';
import './App.css';
import Chart from './components/chart'
const API_URL = "https://nataliia-radina.github.io/react-vis-example/";
class App extends Component {
constructor(props) {
super(props)
this.state = {
results: [],
};
}
render() {
csv("./data/test.csv", function(error, data) {
if (error) throw error;
console.log(data);
});
const {results} = this.state;
return (
<div className="App">
<Chart data={results}
/>
</div>
);
}
}
export default App;
test.csv
col1,col2,col3
hi,there,buddy
控制台输出
(39) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, columns: Array(1)]
0:{<!DOCTYPE html>: "<html lang="en">"}
1:{<!DOCTYPE html>: " <head>"}
2:{<!DOCTYPE html>: " <meta charset="utf-8">"}
3:{<!DOCTYPE html>: " <meta name="viewport" content="width=device-width"}
4:{<!DOCTYPE html>: " <meta name="theme-color" content="#000000">"}
5:{<!DOCTYPE html>: " <link rel="manifest" href="/manifest.json">"}
6:{<!DOCTYPE html>: " <link rel="shortcut icon" href="/favicon.ico">"}
7:{<!DOCTYPE html>: " <title>React App</title>"}
8:{<!DOCTYPE html>: " </head>"}
9:{<!DOCTYPE html>: " <body>"}
10:{<!DOCTYPE html>: " <noscript>"}
11:{<!DOCTYPE html>: " You need to enable JavaScript to run this app."}
12:{<!DOCTYPE html>: " </noscript>"}
13:{<!DOCTYPE html>: " <div id="root"></div>"}
14:{<!DOCTYPE html>: " <script type="text/javascript" src="/static/js/bundle.js"></script></body>"}
15:{<!DOCTYPE html>: "</html>"}
columns:["<!DOCTYPE html>"]
length:39
__proto__:Array(0)
答案 0 :(得分:3)
尝试先导入数据:
import React, {Component} from 'react';
import {csv} from 'd3-request';
import './App.css';
import Chart from './components/chart';
import data from './data/test.csv';
const API_URL = "https://nataliia-radina.github.io/react-vis-example/";
class App extends Component {
constructor(props) {
super(props)
this.state = {
results: [],
};
}
render() {
csv(data, function(error, data) {
if (error) throw error;
console.log(data);
});
const {results} = this.state;
return (
<div className="App">
<Chart data={results}
/>
</div>
);
}
}
export default App;
答案 1 :(得分:1)
您最好的选择是将csv文件保存在react项目的公共文件夹中。这是最好的选择。 您不需要创建服务器。
在我的情况下,我将data.csv
文件保留在react的public
文件夹中。
我继续拨打电话:
d3.csv('./ data.csv')。then(data => console.log(data));
拨打电话的另一种方法是使用%PUBLIC_URL%/data.csv
,如create-react-app网站上所示。
在此处详细了解public
文件夹-https://create-react-app.dev/docs/using-the-public-folder/
答案 2 :(得分:1)
我也经历了类似的事情,从测试中我发现,如果服务器上未提供某些内容(在这种情况下为.csv文件),它将未知文件路径重定向为index.html。我不知道为什么要这么做。我仍然没有找到在数据文件夹中提供数据的方法。一种解决方案是将数据直接存储在公用文件夹中,并将其链接为“ /filename.csv ”或( process.env.PUBLIC_URL +“ filename.csv”)在JS文件中。
答案 3 :(得分:0)
csv(url)-这会将请求发送到服务器以获取文件。
将此test.csv文件保留在公用文件夹中,然后尝试像访问文件一样 csv(“ / test.csv”) 我已经尝试过,并且有效。
我不确定第2行,下面的csv import语句对我有用。
从“ d3”导入{csv}