javascript - Hvordan lese fra en csv-fil i en React-app?

Jeg bygde en superenkelt React-app ved å bruke TypeScript-versjonen av create-react-app.

I min React-app vil jeg vise data fra csv-filer jeg har lagt til i prosjektet mitt. Forestill deg en data.csv-fil under src.

Ved et knappetrykk vil jeg utløse en funksjon som leser denne filen, bruker noen av dataene til beregninger osv., og deretter skriver ut resultatet. Hva er den beste måten å få dette til? Jeg vet hvordan man utløser en funksjon ved knappetrykk i React, men vet ikke hva jeg skal gjøre i den funksjonen for å lese filen og logge dataene til konsollen i starten.

Viktig - Jeg har allerede filbanen og filen i prosjektet mitt og trenger ikke brukerinput for å finne filen

Jeg prøvde å bruke ting som fs innenfor funksjonen, men de ga feil, og jeg lærte at det er fordi de er native moduler og ikke kan brukes i nettleseren. Så hva kan brukes i nettleseren?

Svar #1

fs fungerer bare på serveren, ikke på klienten. Nettleseren har ikke (generell) tilgang til filsystemet.

Det finnes flere alternativer:

1. offentlig mappe

Plasser .csv-filen i public-mappen, så kan du laste den inn slik:

function App() {
    const [ text, setText ] = useState();

    const load = function(){
        fetch( './csvInPublicFolder.csv' )
            .then( response => response.text() )
            .then( responseText => {
                setText( responseText );
            })
    };

    return (
        <div>
            <button onClick={ load }>load</button>
            <h2>text:</h2>
            <pre>{ text }</pre>
        </div>
    );
}

2. webpack fil-laster

Eller, hvis filen må være inne i src-mappen,

  • installer: yarn add file-loader --dev
  • legg til en webpack.config.js:
module.exports = {
    module: {
        rules: [
            {
                test: /\.csv$/,
                use: [
                    {
                        loader: 'file-loader',
                    },
                ],
            },
        ],
    },
};
  • Og importer CSV-filen slik:
import csvFilePath from './csvInSrcFolder.csv';
import { useState } from 'react';

function App() {
    const [ text, setText ] = useState();

    const load = function(){
        fetch( csvFilePath )
            .then( response => response.text() )
            .then( responseText => {
                setText( responseText );
            });
    };

    return (
        <div>
            <button onClick={ load }>load</button>
            <h2>text:</h2>
            <pre>{ text }</pre>
        </div>
    );
}

3. server

Eller du kan lage en tilpasset server.js og sende en forespørsel til serveren. På serveren har du tilgang til filsystemet (fs).

4. analysere CSV

Hvis du ikke vil analysere filinnholdet selv, kan du bruke en eksisterende CSV-parser. Noen anbefaler papaparse (jeg har ingen egen erfaring med hvilke som er gode)

import * as Papa from 'papaparse';
// ...
fetch( csvFilePath )
    .then( response => response.text() )
    .then( responseText => {
        // -- parse csv
        var data = Papa.parse(responseText);
        console.log('data:', data);
    });

Svar #2

Siden OP nevnte:

Viktig - Jeg har allerede filbanen og filen i prosjektet mitt og trenger ikke brukerinput for å finne filen

Det vil være bedre å forhåndslese filen og ha innholdet tilgjengelig allerede i appen. Dette vil unngå behovet for å gjøre noen fetch under kjøring og vil forbedre ytelsen.
For å gjøre dette, må vi konfigurere webpack.

Dette kan gjøres på følgende måte:

  1. Installer react-app-rewired slik at vi kan endre webpack.config.js.

  2. Legg til en regel i webpack.config.js (indirekte, via pakken ovenfor) for å laste inn innholdet i csv-filen når vi kjører npm start eller npm run build.

  3. Importer csv-filen i React-komponentskriptet og bruk innholdet.

Forklart i detalj nedenfor.

1. Installer react-app-rewired

Sjekk dokumentasjonen her - https://github.com/timarney/react-app-rewired.
I utgangspunktet må vi:

  1. npm install [email  --save-dev

  2. snu start, build, test-kommandoene i package.json slik:

    - "start": "react-scripts start",
+ "start": "react-app-rewired start",

2. Opprett og oppdater config-overrides.js

Lag en fil kalt config-overrides.js i prosjektets rotmappe, og legg til følgende der:

module.exports = function override(config, env) {
  config.module.rules = [
    ...config.module.rules,
    {
      resourceQuery: /raw/,
      type: 'asset/source',
      generator: { emit: false, }
    },
    {
      test: /\.csv$/,
      loader: 'csv-loader',
      type: 'asset/source',
      options: {
        dynamicTyping: true,
        header: true,
        skipEmptyLines: true
      },
      generator: { emit: false }
    } 
  ]
  return config;
}

Merk: Den første regelen ovenfor vil hjelpe oss med å lese filen som ren tekst, mens den neste vil analysere den for oss (forutsatt at vi har installert csv-loader).
Bruk den som er nødvendig etter behov.

3. Importer csv-fil i React-skript

const csv = require('./filename.csv?raw'); // we get string
// or
const csv = require('./filename.csv'); // we get json
// Use the csv variable wherever needed

Relaterte artikler