Creé una aplicación de reacción súper básica usando la versión mecanografiada de create-react-app.
En mi aplicación de reacción, quiero mostrar datos de archivos csv que he agregado a mi proyecto. Imagine un archivo data.csv bajo src .
Al hacer clic en un botón, quiero activar una función que lea este archivo, use algunos de los datos para cálculos, etc. y luego imprima el resultado. ¿Cuál es la mejor manera de hacer que esto suceda? Sé cómo activar una función al hacer clic en el botón en Reaccionar, pero no sé qué hacer dentro de esa función para leer el archivo y la consola registra los datos para comenzar.
Importante : ya tengo la ruta del archivo y el archivo en mi proyecto y no necesito la entrada del usuario para encontrar el archivo.
Intenté usar cosas como fs dentro de la función, pero arrojan errores y aprendí que son módulos nativos y no se pueden usar en el navegador. Entonces, ¿qué se puede usar para el navegador?
fs solo funciona en el servidor, no en el cliente. El navegador no tiene acceso (general) al sistema de archivos.
Hay varias opciones:
Coloque el archivo .csv en la carpeta public , luego puede cargarlo como:
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> ); } O, si el archivo tiene que estar dentro de la carpeta src ,
yarn add file-loader --devwebpack.config.js : module.exports = { module: { rules: [ { test: /\.csv$/, use: [ { loader: 'file-loader', }, ], }, ], }, }; 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> ); } O puede crear un server.js personalizado y enviar una solicitud al servidor. En el servidor tiene acceso al sistema de archivos ( fs ).
si no desea analizar el contenido del archivo usted mismo, puede usar un analizador csv existente. Algunas personas recomiendan papaparse (no tengo experiencia propia sobre cuáles son buenos)
import * as Papa from 'papaparse'; // ... fetch( csvFilePath ) .then( response => response.text() ) .then( responseText => { // -- parse csv var data = Papa.parse(responseText); console.log('data:', data); });