在 React 中以 table 显示本地 CSV 数据

Question

我是 React 新手，对编码只有入门级的了解，但需要将其用于项目。

我试图在一个简单的 HTML table 中显示来自本地 csv 文件的数据，然后用户可以在页面上搜索这些数据。到目前为止，我只能找到要求用户先上传自己的 CSV 的教程，但我只需要在屏幕上显示数据即可。

我知道这可能是一个非常简单的问题，但对我来说是全新的，我似乎找不到有效的解决方案。

此代码来自我遵循的教程之一，returns 我需要的结果，但仅当用户首先上传 csv 时。

    import React, {useState, useCallback} from 'react'
import {useDropzone} from 'react-dropzone'
import Papa from 'papaparse';
import './App.css';


 export default function MyDropzone () {
  const onDrop = useCallback(acceptedFiles => {
    if (acceptedFiles.length) {
  parseFile(acceptedFiles[0]);
}
  }, []);

  const {getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject} = useDropzone({onDrop, accept: 'text/csv'})

  const [parsedCsvData, setParsedCsvData] = useState([]);

  const parseFile = file => {
Papa.parse(file, {
    header: true,
    complete: results => {
      setParsedCsvData(results.data)
    },
  });
};

return (
  <div className="Archive">
    <div
      {...getRootProps({
        className: `dropzone
        ${isDragAccept && 'dropzoneAccept'}
        ${isDragReject && 'dropzoneReject'}`,
      })}
    >
      <input {...getInputProps()} />
      {isDragActive ? (
        <p>Drop the files here ...</p>
      ) : (
        <p>Drag 'n' drop some files here, or click to select files</p>
      )}
    </div>
    <table className="ArchiveTable">
      <thead>
        <tr>
          <th>Kanji</th>
          <th>Reading</th>
          <th>English</th>
        </tr>
      </thead>
      <tbody>
        {parsedCsvData &&
          parsedCsvData.map((parsedData, index) => (
            <tr key={index}>
              <td>{parsedData.Name}</td>
              <td>{parsedData.Address}</td>
              <td>{parsedData.Postcode}</td>
              <td>{parsedData.Issue}</td>
              <td>{parsedData.Date}</td>
              <td>{parsedData.Score}</td>
            </tr>
          ))}
      </tbody>
    </table>
  </div>
);
}

Answer 1

试试这个：

将 fetch 内的 url 更改为此行中您的 csv 文件的位置 const response = await fetch("/data/nodes.csv"); .

import React, { useState, useEffect } from "react";
import "./App.css";
import Papa from 'papaparse';

export default function MyDropzone() {
    const [parsedCsvData, setParsedCsvData] = useState([]);

    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
            setParsedCsvData(rows);
        }
        getData();
    }, []);

    return (
        <div className="Archive">
            <table className="ArchiveTable">
                <thead>
                    <tr>
                        <th>Kanji</th>
                        <th>Reading</th>
                        <th>English</th>
                    </tr>
                </thead>
                <tbody>
                    {parsedCsvData &&
                        parsedCsvData.map((parsedData, index) => (
                            <tr key={index}>
                                <td>{parsedData.Name}</td>
                                <td>{parsedData.Address}</td>
                                <td>{parsedData.Postcode}</td>
                                <td>{parsedData.Issue}</td>
                                <td>{parsedData.Date}</td>
                                <td>{parsedData.Score}</td>
                            </tr>
                        ))}
                </tbody>
            </table>
        </div>
    );
}

在 React 中以 table 显示本地 CSV 数据

Displaying local CSV data in a table in React

csv

node.js

reactjs

papaparse

react-native