如何使用 Reactjs 获取 CSV 数据并存储到状态中？

Question

我尝试过使用“pappparse”，但没有得到准确的数据。什么是 我的代码错了吗？

我想使用 CSV 文件以 JSON 格式获取所有数据并设置到我的 hookState 中。

代码：

import React from "react";
import { Table, Tag, Space } from "antd";
import Papa from "papaparse";
function Home() {
  const [rows, setRows] = React.useState([]);
  React.useEffect(() => {
    async function getData() {
      const response = await fetch("../Assets/images/state_wise_data.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();
  }, []);
  console.log(rows);
  return (
    <div>
      <Table columns={columns} dataSource={rows} />
    </div>
  );
}
export default Home;

Answer 1

根据documentation，这是方法

React.useEffect(() => {
    Papa.parse("../Assets/images/state_wise_data.csv", {
        download: true,
        complete: data => {
            setRows(data.data);
        }
    });
}, []);

demo

如果您遇到错误，请检查完整回调中的 console.log(data);

这是complete example