Javascript 反应：导入csv文件并解析

我有一个名为

data.csv

的csv文件，它与我的js控制器位于同一文件夹中：

namn,vecka,måndag,tisdag,onsdag,torsdag,fredag,lördag,söndag
Row01,a,a1,a2,a3,a4,a5,a6,a7
Row02,b,b1,b2,b3,b4,b5,b6,b7
Row03,c,c1,c2,c3,c4,c5,c6,c7
Row04,d,d1,d2,d3,d4,d5,d6,d7
Row05,e,e1,e2,e3,e4,e5,e6,e7
Row06,f,f1,f2,f3,f4,f5,f6,f7
Row07,g,g1,g2,g3,g4,g5,g6,g7
Row08,h,h1,h2,h3,h4,h5,h6,h7
Row09,i,i1,i2,i3,i4,i5,i6,i7
Row10,j,j1,j2,j3,j4,j5,j6,j7
Row11,k,k1,k2,k3,k4,k5,k6,k7
Row12,l,l1,l2,l3,l4,l5,l6,l7

在react中，我需要导入一个csv文件并将其解析为JSON。我尝试了以下方法：

componentWillMount() {
    this.getCsvData();
}

getData(result) {
    console.log(result);
}

getCsvData() {
    let csvData = require('./data.csv');

    Papa.parse(csvData, {
        complete: this.getData
    });
}

{
  "data": [
    [
      "/static/media/horoscope-data.0232d748.csv"
    ]
  ],
  "errors": [
    {
      "type": "Delimiter",
      "code": "UndetectableDelimiter",
      "message": "Unable to auto-detect delimiting character; defaulted to ','"
    }
  ],
  "meta": {
    "delimiter": ",",
    "linebreak": "\n",
    "aborted": false,
    "truncated": false,
    "cursor": 41
  }
}

出于某种原因，这不起作用。第一个console.log显示

/static/media/data.0232d748.csv

，第二个显示以下内容：

componentWillMount() {
    this.getCsvData();
}

getData(result) {
    console.log(result);
}

getCsvData() {
    let csvData = require('./data.csv');

    Papa.parse(csvData, {
        complete: this.getData
    });
}

{
  "data": [
    [
      "/static/media/horoscope-data.0232d748.csv"
    ]
  ],
  "errors": [
    {
      "type": "Delimiter",
      "code": "UndetectableDelimiter",
      "message": "Unable to auto-detect delimiting character; defaulted to ','"
    }
  ],
  "meta": {
    "delimiter": ",",
    "linebreak": "\n",
    "aborted": false,
    "truncated": false,
    "cursor": 41
  }
}

---

我不明白我做错了什么。有人能帮我吗？

为了回答我自己的问题，我可以这样重写它（

/src/controllers/data controller/data controller.js

，添加了完整的代码以提高清晰度）：

从“React”导入React；
从“papaparse”导入Papa；
从“react router dom”导入{withRouter}；
类DataController扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
};
this.getData=this.getData.bind（this）；
}
组件willmount（）{
这是getCsvData（）；
}
fetchCsv（）{
返回fetch（'/data/data.csv'）。然后（函数（响应）{
让reader=response.body.getReader（）；
let decoder=新的文本解码器（'utf-8'）；
返回reader.read（）.then（函数（结果）{
返回解码器解码（结果值）；
});
});
}
获取数据（结果）{
this.setState（{data:result.data}）；
}
异步getCsvData（）{
让csvData=wait this.fetchCsv（）；
帕帕·帕斯（csvData{
完成：this.getData
});
}
render（）{
返回(
...
);
}
}
使用路由器（数据控制器）导出默认值；

---

在这里，我使用内置的fetch将其作为流来获取，然后使用内置流读取器读取流，并使用

textdecker

对数据进行解码。我也不得不移动文件。在它位于

/src/controllers/data controller

之前，我必须将它移动到

/public/data

这里有一个使用React钩子的类似示例-

import React from 'react'
import Papa from 'papaparse'

export default function() {
  const [rows, setRows] = React.useState([])
  React.useEffect(() => {
    async function getData() {
      const response = await fetch('/data/nodes.csv')
      const reader = response.body.getReader()
      const result = await reader.read() // raw array
      const decoder = new TextDecoder('utf-8')
      const csv = decoder.decode(result.value) // the csv text
      const results = Papa.parse(csv, { header: true }) // object with { data, errors, meta }
      const rows = results.data // array of objects
      setRows(rows)
    }
    getData()
  }, []) // [] means just do this once, after initial render
  return (
    <div className="app">
      <Table cols={tripColumns} rows={rows} />
    </div>
  )
}

从“React”导入React
从“papaparse”导入Papa
导出默认函数（）{
const[rows，setRows]=React.useState（[]）
React.useffect（（）=>{
异步函数getData（）{
const response=wait fetch（'/data/nodes.csv'）
const reader=response.body.getReader（）
const result=wait reader.read（）//原始数组
常量解码器=新的文本解码器（'utf-8'）
const csv=decoder.decode（result.value）//csv文本
const results=Papa.parse（csv，{header:true}）//带有{data，errors，meta}的对象
const rows=results.data//对象数组
设置行（行）
}
getData（）
}，[]）/[]表示在初始渲染后只执行一次
返回(
)
}

两天内都无法解决这个问题。非常感谢！