您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

React:导入CSV文件并解析

React:导入CSV文件并解析

为了回答我自己的问题,我可以像这样重写它(/src/controllers/data-controller/data- controller.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 withRouter(DataController);

在这里,我使用内置提取功能像流一样获取它,然后使用内置流读取器读取流,并使用解码数据TextDecoder。我也不得不移动文件。在它进入之前,/src/controllers/data- controller我不得不将其移动到/public/data

其他 2022/1/1 18:16:35 有473人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶