在React的表中顯示本地CSV資料

我是新手，對編碼只有入門級的了解，但需要將其用于專案。

我正在嘗試在一個簡單的 HTML 表中顯示來自本地 csv 檔案的資料，然后用戶可以在頁面上搜索該表。到目前為止，我只能找到要求用戶先上傳自己的 CSV 的教程，但我只需要在螢屏上顯示資料。

我很欣賞這可能是一個非常簡單的問題，但它對我來說是全新的，我似乎無法找到有效的解決方案。

此代碼來自我遵循的教程之一，并回傳我需要的結果，但僅當用戶首先上傳 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>
);
}

uj5u.com熱心網友回復：

試試這個：

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>
    );
}

標籤：节点.js 反应 反应式 CSV 帕帕帕斯

上一篇：python-如何根據用戶為python中的唯一檔案路徑創建替換變數？

下一篇：如何計算CSV中的值？