我想在reactJS中读取csv文件。我正在尝试文件系统('fs'),但无法正常工作。
以下是我在nodejs中相同的工作代码,但我在ReactJs中不工作。有人可以指导我如何在React js中读取文件。我们有什么简单的方法吗?我只想从同一项目目录中读取文件。
节点js中的工作代码
const CSVToJSON = require("csvtojson");
const CSVToCSV = require("jsontocsv");
const FileSystem = require("fs");
CSVToJSON().fromFile("./ca-500.csv").then(source => {
console.log(source);
})
但是当在React js中尝试时,它给出了下面提到的错误
错误:找不到模块“ fs”
答案 0 :(得分:0)
您可以尝试react-csv-reader
npm install --save react-csv-reader
用法
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import CSVReader from 'react-csv-reader'
class App extends Component {
...
render() {
return (
<CSVReader
cssClass="csv-reader-input"
label="Select CSV with secret Death Star statistics"
onFileLoaded={this.handleForce}
onError={this.handleDarkSideForce}
inputId="ObiWan"
inputStyle={{color: 'red'}}
/>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
或者,您可以使用React File Reader
npm install react-file-reader --save
<ReactFileReader handleFiles={this.handleFiles} fileTypes={'.csv'}>
<button className='btn'>Upload</button>
</ReactFileReader>
handleFiles = files => {
var reader = new FileReader();
reader.onload = function(e) {
// Use reader.result
alert(reader.result)
}
reader.readAsText(files[0]);
}
如果您只想读取本地文件,则可以使用papaparse
npm install papaparse
import React from 'react';
import Papa from 'papaparse';
class DataController extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
this.getData = this.getData.bind(this);
}
componentWillMount() {
this.getCsvData();
}
fetchCsv() {
return fetch('./ca-500.csv').then(function (response) {
let reader = response.body.getReader();
let decoder = new TextDecoder('utf-8');
return reader.read().then(function (result) {
return decoder.decode(result.value);
});
});
}
getData(result) {
this.setState({data: result.data});
}
async getCsvData() {
let csvData = await this.fetchCsv();
Papa.parse(csvData, {
complete: this.getData
});
}
render() {
return (
<section className="data-controller">
...
</section>
);
}
}
export default DataController;
答案 1 :(得分:0)
我找到了正确的解决方案。它在其他一些问题下面得到了回答。 这是该问题的链接。
How should I parse this json object in react with lifecycle method?
和正确的工作代码
import React, {Component} from 'react';
import './App.css';
import * as d3 from 'd3';
import data from './data_set/data.csv';
class App extends Component {
constructor(props) {
super(props)
}
componentDidMount() {
d3.csv(data).then(function(data) {
console.log(data)
}).catch(function(err) {
throw err;
})
}
render() {
return (
<div className = "App" >
<div> Data Visualization </div>
</div>
);
}
}
export default App;
答案 2 :(得分:0)
可以使用 FileReader onload 方法读取文件数据
您会发现这对于在 React 中使用 File Reader 处理文件很有用 ReactJS File Reader