Reactjs React/Ant设计-无法上载XLSX

我正在学习React，目前正在为我的上传按钮使用ant设计，但不知何故它无法工作（没有设计，它可以正常工作）

我的原始代码（工作版本）：

导出默认值（{addItem}）=>{
返回(
{
var reader=new FileReader（）；
reader.onload=事件=>{
var数据=event.target.result；
变量工作簿=XLSX.read（数据{
键入：“二进制”，
});
工作簿.SheetNames.forEach（sheetName=>{
var XL_row_object=XLSX.utils.sheet_to_row_object_数组（workbook.Sheets[sheetName]）；
XL\u行\u对象。forEach（x=>{
addItem（x.sku，x.description，parseInt（x.quantity），parseFloat（x.cost））；
});
});
};
if（e.target.files[0]）{
reader.readAsBinaryString（e.target.files[0]）；
}
}}
/>
);
};

我犯的错误是：

（另外，我的上传组件只包含4列/值：sku、说明、数量和单价）

import React，{Component}来自“React”；
从“XLSX”导入*作为XLSX；
从“antd”导入{按钮、图标、消息}；
导入“/styles.css”；
导出默认类UploadItem扩展组件{
onImportExcel=（文件，附加项）=>{
const{files}=file.target；
const fileReader=new fileReader（）；
fileReader.onload=事件=>{
试一试{
const{result}=event.target；
constworkbook=XLSX.read（结果，{type:“binary”}）；
让数据=[]；
用于（工作簿.Sheets中的常数表）{
//变量XL_行对象=
XLSX.utils.sheet_to_row_object_数组（workbook.Sheets[sheetName]）；
if（workbook.Sheets.hasOwnProperty（Sheet））{
data=XLSX.utils.sheet_to_row_object_数组（workbook.Sheets[sheet]）；
data.forEach（x=>{
addItem（x.sku，x.description，parseInt（x.quantity），parseFloat（x.cost））；
});
}
}
message.success（“上传成功！”）；
控制台日志（数据）；
}捕获（e）{
message=message.error（“文件类型不正确！”）；
}
};
fileReader.readAsBinaryString（文件[0]）；
};
render（）{
返回(
上传文件
支持.xlsx、.xls格式的文件
);
}
}

有几件事……首先，我要重构它，使XLS处理位于组件之外（因为它实际上不需要在组件之外）

然后，

onImportExcel

处理程序只需抓取所选文件，通过函数运行它，我们就可以开始了

我没有对

消息

做任何事情——它们也应该属于组件内部，但在这一点上，我也会重构

importExcel

以返回一个承诺。不过，我认为这超出了这个问题的范围：）

import React，{Component}来自“React”；
从“XLSX”导入*作为XLSX；
从“antd”导入{按钮、图标、消息}；
导入“/styles.css”；
const importExcel=（文件，附加项）=>{
const fileReader=new fileReader（）；
fileReader.onload=事件=>{
试一试{
const{result}=event.target；
constworkbook=XLSX.read（结果，{type:“binary”}）；
用于（工作簿.Sheets中的常数表）{
//变量XL_行对象=
XLSX.utils.sheet_to_row_object_数组（workbook.Sheets[sheetName]）；
if（workbook.Sheets.hasOwnProperty（Sheet））{
data=XLSX.utils.sheet_to_row_object_数组（workbook.Sheets[sheet]）；
data.forEach（x=>{
addItem（x.sku，x.description，parseInt（x.quantity），parseFloat（x.cost））；
});
}
}
message.success（“上传成功！”）；
}捕获（e）{
message=message.error（“文件类型不正确！”）；
}
};
fileReader.readAsBinaryString（文件）；
};
导出默认类UploadItem扩展组件{
onImportExcel=事件=>{
const{files}=event.target；
如果（files.length==1）{
//处理一个文件，如果我们正好有一个
进口公司(
文件[0]，
//不确定要对数据做什么，所以让我们记录它
（sku，说明，数量，成本）=>console.log（sku，说明，数量，成本），
);
}
};
render（）{
返回(
上传文件
支持.xlsx、.xls格式的文件
);
}
}

非常感谢@AKX，圣诞快乐！你的解决方案是有效的，它把我的项目带入了下一个阶段。lol。还有，让我的代码更漂亮的大拇指！！

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>
  );
};

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>
    );
  }
}

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>
    );
  }
}