¿Cómo cargar y leer archivos CSV en React.js?

Después de consultar con especialistas en este tema, programadores de varias ramas y profesores dimos con la respuesta a la cuestión y la dejamos plasmada en este post.

Solución:

Lo averigué. Una combinación de react-file-reader y FileReader de HTML5 (ver esta página).

Colocó el bit del lector de archivos de reacción dentro de renderizar:

    Upload

Y luego esto de arriba.

handleFiles = files => 
    var reader = new FileReader();
    reader.onload = function(e) 
        // Use reader.result
        alert(reader.result)
    
    reader.readAsText(files[0]);

Yo usaría Papa Parse (https://www.npmjs.com/package/papaparse). Y aquí hay un ejemplo de componente de reacción:

class FileReader extends React.Component 
  constructor() 
    super();
    this.state = 
      csvfile: undefined
    ;
    this.updateData = this.updateData.bind(this);
  

  handleChange = event => 
    this.setState(
      csvfile: event.target.files[0]
    );
  ;

  importCSV = () => 
    const  csvfile  = this.state;
    Papa.parse(csvfile, 
      complete: this.updateData,
      header: true
    );
  ;

  updateData(result) 
    var data = result.data;
    console.log(data);
  

  render() 
    console.log(this.state.csvfile);
    return (
      

        
Import CSV File!
         
            this.filesInput = input;
          
          name="file"
          placeholder=null
          onChange=this.handleChange
        />
        

         Upload now!
      
    );
  


export default FileReader;

Aquí tienes las comentarios y calificaciones

Si te sientes a gusto, tienes la opción de dejar una reseña acerca de qué te ha gustado de este enunciado.

Utiliza Nuestro Buscador