Question

我有一个接受数据，然后将其设置为XLSX的组件。我想做的是，当我单击下载时，我要将加载设置为true并显示加载指示或用户可以知道正在运行的内容。在我的代码下载工作，但当我单击按钮加载仍然是错误的。为什么？

import "antd/dist/antd.css";
import { Button } from "antd";
import { DownloadOutlined } from "@ant-design/icons";
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";
import React, {useState} from "react";
import moment from "moment";

const ExportToXlxs = ({ data }) => {
  const [loading, setloading] = useState(false)
  const exportData = () => {
    setloading(true)
    const fileType =
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
    const fileExtension = ".xlsx";
    let mappedData = [];
    data.map((item) => {
      return mappedData.push({
       //make map
      });
    });
    const ws = XLSX.utils.json_to_sheet(mappedData);
    const wb = { Sheets: { data: ws }, SheetNames: ["data"] };
    const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
    const data = new Blob([excelBuffer], { type: fileType });

    FileSaver.saveAs(data, "file" + fileExtension);
    setloading(false)
  };

  return loading ? <div>loading</div> : (
    <Button
      type="primary"
      style={{
        marginLeft: "50px",
        alignSelf: "center",
      }}
      onClick={exportData}
      icon={<DownloadOutlined />}
    >
      Download
    </Button>
  );
};
export default ExportToXlxs;

Answer 1

您正在exportData函数中运行异步操作。尝试将其更新为此：

const exportData = async () => {
    setloading(true)
    const fileType =
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
    const fileExtension = ".xlsx";
    let mappedData = [];
    data.map((item) => {
      return mappedData.push({
       //make map
      });
    });
    const ws = await XLSX.utils.json_to_sheet(mappedData);
    const wb = { Sheets: { data: ws }, SheetNames: ["data"] };
    const excelBuffer = await XLSX.write(wb, { bookType: "xlsx", type: "array" });
    const data = new Blob([excelBuffer], { type: fileType });

    await FileSaver.saveAs(data, "file" + fileExtension);
    setloading(false)
};

现在，您的操作将在其他操作（例如setLoading）异步运行之前在需要的地方等待。从本质上讲，发生的事情是，setLoading函数可以彼此快速运行，而无需先等待文件被保存。 请参阅@vinayakshahdeo对您的问题的评论

注意：我添加的某些await关键字可能是不必要的。我对您使用的库不太熟悉。

Answer 2

您可以执行以下操作，分别调用setstate

import "antd/dist/antd.css";
import { Button } from "antd";
import { DownloadOutlined } from "@ant-design/icons";
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";
import React, {useState} from "react";
import moment from "moment";

const ExportToXlxs = ({ data }) => {
  const [loading, setloading] = useState(false)
  const exportData = () => {
    const fileType =
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
    const fileExtension = ".xlsx";
    let mappedData = [];
    data.map((item) => {
      return mappedData.push({
       //make map
      });
    });
    const ws = XLSX.utils.json_to_sheet(mappedData);
    const wb = { Sheets: { data: ws }, SheetNames: ["data"] };
    const excelBuffer = XLSX.write(wb, { bookType: "xlsx", type: "array" });
    const data = new Blob([excelBuffer], { type: fileType });

    FileSaver.saveAs(data, "file" + fileExtension);
    setloading(false)
  };

  return loading ? <div>loading</div> : (
    <Button
      type="primary"
      style={{
        marginLeft: "50px",
        alignSelf: "center",
      }}
      onClick={()=>{
      setloading(true);
      exportData();
      }
      icon={<DownloadOutlined />}
    >
      Download
    </Button>
  );
};
export default ExportToXlxs;

useState加载状态未触发

2 个答案: