React / Ant Design - невозможно загрузить XLSX

Question

Я изучаю React и в настоящее время использую ant design для своей кнопки загрузки, но почему-то это не сработает (работает нормально без дизайна.

Мой оригинальный код (рабочая версия):

export default ({ addItem }) => {
  return (
    <label className="btn">
      <input
        type="file"
        onChange={e => {
          var reader = new FileReader();

          reader.onload = event => {
            var data = event.target.result;
            var workbook = XLSX.read(data, {
              type: "binary",
            });
            workbook.SheetNames.forEach(sheetName => {
              var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
              XL_row_object.forEach(x => {
                addItem(x.sku, x.description, parseInt(x.quantity), parseFloat(x.cost));
              });
            });
          };
          if (e.target.files[0]) {
            reader.readAsBinaryString(e.target.files[0]);
          }
        }}
      />
    </label>
  );
};

ошибки, которые я сделал:

(дополнительно, мой компонент загрузки принимает только 4 столбца / значения: sku, описание, количество и единицу измерения)

import React, { Component } from "react";
import * as XLSX from "xlsx";
import { Button, Icon, message } from "antd";
import "./styles.css";

export default class UploadItem extends Component {
  onImportExcel = (file, addItem) => {
    const { files } = file.target;
    const fileReader = new FileReader();
    fileReader.onload = event => {
      try {
        const { result } = event.target;
        const workbook = XLSX.read(result, { type: "binary" });
        let data = [];
        for (const Sheet in workbook.Sheets) {
          // var XL_row_object =
          XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
          if (workbook.Sheets.hasOwnProperty(Sheet)) {
            data = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[Sheet]);
            data.forEach(x => {
              addItem(x.sku, x.description, parseInt(x.quantity), parseFloat(x.cost));
            });
          }
        }
        message.success("upload success!");
        console.log(data);
      } catch (e) {
        message = message.error("file type is incorrect!");
      }
    };
    fileReader.readAsBinaryString(files[0]);
  };
  render() {
    return (
      <div style={{ marginTop: 100 }}>
        <Button className="upload-wrap">
          <Icon type="upload" />
          <input className="file-uploader" type="file" accept=".xlsx, .xls" onChange={this.onImportExcel} />
          <span className="upload-text">Upload files</span>
        </Button>
        <p className="upload-tip">Supports files in .xlsx, .xls format</p>
      </div>
    );
  }
}

Answer 1

Есть пара вещей ... Я бы реорганизовал это так, чтобы обработка XLS находилась вне компонента (так как в действительности его там не нужно), для начала.

Затем *Обработчик 1003 * должен просто захватить выбранный файл, запустить его через функцию, и мы готовы идти вперед.

Я ничего не делал с вещами message - они также принадлежали бы внутрикомпонент, но на этом этапе я бы также рефакторил importExcel, чтобы вернуть обещание.Это выходит за рамки этого вопроса, хотя, я думаю:)

import React, { Component } from "react";
import * as XLSX from "xlsx";
import { Button, Icon, message } from "antd";
import "./styles.css";

const importExcel = (file, addItem) => {
  const fileReader = new FileReader();
  fileReader.onload = event => {
    try {
      const { result } = event.target;
      const workbook = XLSX.read(result, { type: "binary" });
      for (const Sheet in workbook.Sheets) {
        // var XL_row_object =
        XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
        if (workbook.Sheets.hasOwnProperty(Sheet)) {
          data = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[Sheet]);
          data.forEach(x => {
            addItem(x.sku, x.description, parseInt(x.quantity), parseFloat(x.cost));
          });
        }
      }
      message.success("upload success!");
    } catch (e) {
      message = message.error("file type is incorrect!");
    }
  };
  fileReader.readAsBinaryString(file);
};

export default class UploadItem extends Component {
  onImportExcel = event => {
    const { files } = event.target;
    if (files.length === 1) {
      // Process a file if we have exactly one
      importExcel(
        files[0],
        // Not sure what you want to do with the data, so let's just log it
        (sku, description, quantity, cost) => console.log(sku, description, quantity, cost),
      );
    }
  };

  render() {
    return (
      <div style={{ marginTop: 100 }}>
        <Button className="upload-wrap">
          <Icon type="upload" />
          <input className="file-uploader" type="file" accept=".xlsx, .xls" onChange={this.onImportExcel} />
          <span className="upload-text">Upload files</span>
        </Button>
        <p className="upload-tip">Supports files in .xlsx, .xls format</p>
      </div>
    );
  }
}