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

Question

我试过使用“papparse”，但没有得到确切的数据。我的代码有什么问题？

我想使用 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

根据文档，这是方法

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

演示

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

这是一个完整的例子