React’te Verimli CSV Dosyası İşleme

Birçok web uygulamasında CSV (Virgül ile Ayrılmış Değerler) dosyalarıyla çalışma yaygın bir gereksinimdir. Kullanıcı arayüzleri oluşturmak için popüler bir JavaScript kitaplığı olan React, sıklıkla CSV veri yüklemelerini ele almalı ve bu verileri kullanıcıya göstermelidir. Bu makale, bunu başarmak için iki etkili yöntemi ele almaktadır: yerleşik FileReader API’sini kullanma ve güçlü papaparse kütüphanesinden yararlanma.

İçindekiler

• React’te CSV Dosyalarını Okumak İçin FileReader API’sini Kullanma
• React’te CSV Dosyalarını Okumak İçin Papaparse Kütüphanesini Kullanma

React’te CSV Dosyalarını Okumak İçin FileReader API’sini Kullanma

FileReader API’sı, dosya içeriğinin eşzamansız olarak okunmasını sağlayan yerel bir tarayıcı özelliğidir. İşlevsel olsa da, bir kütüphane kullanmaya kıyasla daha fazla manuel CSV veri ayrıştırma gerektirir.

1. Bileşeni Kurma:

Bir dosya giriş öğesiyle bir React bileşeni oluşturarak başlayın:

import React, { useState } from 'react';

function CSVReader() {
  const [csvData, setCsvData] = useState([]);

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const csvString = e.target.result;
        try {
          const csvArray = parseCSV(csvString);
          setCsvData(csvArray);
        } catch (error) {
          console.error("CSV ayrıştırılırken hata:", error);
          // Hatayı uygun şekilde ele alın, örneğin, bir hata mesajı gösterin
        }
      };
      reader.onerror = () => {
        console.error("Dosya okunurken hata");
        // Hatayı uygun şekilde ele alın
      };
      reader.readAsText(file);
    }
  };

  const parseCSV = (csvString) => {
    const lines = csvString.split('n');
    const headers = lines[0].split(',');
    const data = lines.slice(1).map(line => {
      const values = line.split(',');
      return headers.reduce((obj, header, index) => {
        obj[header] = values[index];
        return obj;
      }, {});
    });
    return data;
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <table>
        <thead>
          <tr>
            {csvData.length > 0 && csvData[0] && Object.keys(csvData[0]).map(header => <th key={header}>{header}</th>)}
          </tr>
        </thead>
        <tbody>
          {csvData.map((row, index) => (
            <tr key={index}>
              {Object.values(row).map((value, i) => <td key={i}>{value}</td>)}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default CSVReader;

Bu örnek, dosya okuma ve CSV ayrıştırma için hata işleme içerir. Bu temel ayrıştırıcının basit bir CSV yapısını varsaydığını unutmayın. Karmaşık dosyalar için daha sağlam bir işleme gereklidir.

React’te CSV Dosyalarını Okumak İçin Papaparse Kütüphanesini Kullanma

papaparse, CSV ayrıştırmayı basitleştiren yaygın olarak kullanılan bir JavaScript kütüphanesidir. Tırnak işaretleri ve kaçış içerenler de dahil olmak üzere çeşitli CSV formatlarını ele alarak daha güvenilir bir çözüm sunar.

1. Kurulum:

papaparse‘ı npm veya yarn kullanarak yükleyin:

npm install papaparse

2. Papaparse’ı Uygulama:

import React, { useState } from 'react';
import Papa from 'papaparse';

function CSVReaderPapaparse() {
  const [csvData, setCsvData] = useState([]);

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      Papa.parse(file, {
        header: true,
        complete: (results) => {
          setCsvData(results.data);
        },
        error: (error) => {
          console.error('CSV ayrıştırılırken hata:', error);
          // Hatayı uygun şekilde ele alın
        }
      });
    }
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <table>
        <thead>
          <tr>
            {csvData.length > 0 && csvData[0] && Object.keys(csvData[0]).map(header => <th key={header}>{header}</th>)}
          </tr>
        </thead>
        <tbody>
          {csvData.map((row, index) => (
            <tr key={index}>
              {Object.values(row).map((value, i) => <td key={i}>{value}</td>)}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default CSVReaderPapaparse;

Bu, CSV ayrıştırma için Papa.parse‘ı kullanır. header: true seçeneği, ilk satırı otomatik olarak başlık olarak kullanır. complete geri çağırımı ayrıştırılmış verileri alır ve bu daha sonra durumda güncellenir. Hata işleme de dahildir. Bu yaklaşım, manuel ayrıştırmadan daha temiz ve daha güvenilirdir.

Bu makale, React’te CSV yüklemelerini ele almanın iki yolunu sunmaktadır. FileReader yöntemi temel bir anlayış sunarken, papaparse çoğu gerçek dünya senaryosu için daha verimli ve güvenilir bir çözüm sağlar. Üretim ortamlarında her zaman kapsamlı hata işlemeyi entegre edin.