Чтение текстового файла в React с использованием javascript API FileReader () без серверной части - PullRequest
Новая
       28

Чтение текстового файла в React с использованием javascript API FileReader () без серверной части

0 голосов
/ 05 мая 2020

Я пытаюсь использовать fileReader () API для чтения загруженного текстового файла для дальнейших манипуляций во внешнем интерфейсе без использования каких-либо внутренних служб 

import React, { Component } from "react";

class FileUploader extends Component {
  state = {
    selectedFile: null,
  };

  onFileChange = (event) => {
    this.setState({ selectedFile: event.target.files[0] });

    let reader = new FileReader();

    reader.onload = function () {
      let text = reader.result;
    };
    reader.readAsText(event.target.files[0]);
  };

  render() {
    console.log(this.state.selectedFile);
    return (
      <div>
        <div>
          <input type="file" onChange={this.onFileChange} />
        </div>
      </div>
    );
  }
}

export default FileUploader;

Работает загрузка текстового файла нормально, проблема возникает при попытке прочитать файл, поскольку я не могу добраться до текстовой переменной, сохраняя ее правильное значение за пределами области действия функции onload, а функция setState ({}) не может работать в области действия onload функция. Как я понимаю, причина проблемы в том, что функция onload выполняется после родительской функции onFileChange. Есть ли способ go решить эту проблему, используя только интерфейсную реакцию и JS. Моя цель здесь - определить и добавить текстовую переменную в состояние класса.

...