如何在 table 在 reactjs 中显示 csv 文件数据

Question

我只想将 csv 数据显示到 table 特定列（第一列和第二列）但是 header 名称有 space 并且当显示数据错误时 having.Please 你能告诉我如何解决这个错误....谢谢你

想要这样展示

下面是我的源码

test.csv

测试数据1、测试数据2、测试数据3

AA、BB、CC

App.js

import React from "react";
import "./style.css";
import Papa from "papaparse";

export default function App() {
  const [rows, setRows] = React.useState(null);
  React.useEffect(() => {
    Papa.parse("/test.csv", {
      download: true,
      header: true,
      complete: data => {
        console.log(data.data);
        setRows(data);
      }
    });
  }, []);

  return (
    <div>
      <table>
        <tr>{rows?.meta.fields.map(column => <th>{column}</th>)}</tr>
        {rows?.data.map(row => {
          return (
            <tr>
              <td>{row.Test Data1}</td>
              <td>{row.Test Data2}</td>
              <td>{row.Test Data3}</td>
            </tr>
          );
        })}
      </table>
    </div>
  );
}

控制台

错误

Answer 1

在您的 CSV 文件中，将列名称更改为 testData1、testData2、...

在您的代码中，相应地更改属性：

<tr>
  <td>{row.testData1}</td>
  <td>{row.testData2}</td>
  <td>{row.testData3}</td>
</tr>

... 或者，保持列名称不变并将代码更改为：

<tr>
  <td>{row['Test Data1']}</td>
  ...
</tr>

如何在 table 在 reactjs 中显示 csv 文件数据

how to show csv file data in table at reactjs

csv

row

show

export-to-csv

reactjs