Question

我一直在尝试通过React读取和解析CSV文件，而我几乎找不到它的工作方式。

我非常感谢您的帮助。

P.S：预先感谢您的帮助。

我正在尝试读取CSV文件，然后使用PapaParse对其进行格式化。我遇到的问题是通过以下方法实现此目标的实际方法

FetchCSV.js看起来像这样：

import React from 'react';
import Papa from 'papaparse';
import {withRouter} from 'react-router-dom';

class DataController extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            data: []
        };

        this.getData = this.getData.bind(this);
    }

    componentWillMount() {
        this.getCsvData();
    }

    fetchCsv() {
        return fetch('/data/data.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 FetchCSV;

我遇到类似这样的问题：no-undef和FetchCSV，我也想尝试在控制台上获得结果，但是我找不到放置{{1}的位置}（这对我来说真的很难）。还要提到我将其放在console.log(result);：App.js中（我相信这是需要添加它的方式）。

Answer 1

提取是node-fetch http库的导入名称，您应该使用fs来读写文件，尝试使用fs read。

如何使用react和Papaparse读取和解析CSV

1 个答案: