Reactjs useState加载状态未触发

我有一个组件，它接受数据，然后将其设置为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;

导入“antd/dist/antd.css”；
从“antd”导入{Button}；
从“@ant design/icons”导入{DownloadOutlined}”；
从“文件保存程序”导入*作为文件保存程序；
从“XLSX”导入*作为XLSX；
从“React”导入React，{useState}；
从“时刻”中导入时刻；
const ExportToXlxs=（{data}）=>{
常量[loading，setloading]=useState（false）
const exportData=（）=>{
设置加载（真）
常量文件类型=
“application/vnd.openxmlformats of icedocument.spreadsheetml.sheet；charset=UTF-8”；
const fileExtension=“.xlsx”；
设mappedData=[]；
data.map（（项目）=>{
返回mappedData.push({
//制作地图
});
});
const ws=XLSX.utils.json_到_表（mappedData）；
const wb={Sheets:{data:ws}，SheetNames:[“data”]}；
constExcelBuffer=XLSX.write（wb，{bookType:“XLSX”，type:“array”}）；
const data=new Blob（[excelBuffer]，{type:fileType}）；
FileSaver.saveAs（数据，“文件”+文件扩展名）；
设置加载（错误）
};
返回装载？装载：(
下载
);
};
导出默认的exportToxlx；

您可以这样做，分别调用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;

导入“antd/dist/antd.css”；
从“antd”导入{Button}；
从“@ant design/icons”导入{DownloadOutlined}”；
从“文件保存程序”导入*作为文件保存程序；
从“XLSX”导入*作为XLSX；
从“React”导入React，{useState}；
从“时刻”中导入时刻；
const ExportToXlxs=（{data}）=>{
常量[loading，setloading]=useState（false）
const exportData=（）=>{
常量文件类型=
“application/vnd.openxmlformats of icedocument.spreadsheetml.sheet；charset=UTF-8”；
const fileExtension=“.xlsx”；
设mappedData=[]；
data.map（（项目）=>{
返回mappedData.push({
//制作地图
});
});
const ws=XLSX.utils.json_到_表（mappedData）；
const wb={Sheets:{data:ws}，SheetNames:[“data”]}；
constExcelBuffer=XLSX.write（wb，{bookType:“XLSX”，type:“array”}）；
const data=new Blob（[excelBuffer]，{type:fileType}）；
FileSaver.saveAs（数据，“文件”+文件扩展名）；
设置加载（错误）
};
返回装载？装载：(
{
设置加载（真）；
exportData（）；
}
图标={}
>
下载
);
};
导出默认的exportToxlx；

您正在

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

现在，您的操作将在需要的地方等待，然后再异步运行其他操作，如

setload

。基本上，您的

setLoading

函数将在不等待文件保存的情况下快速运行。请参阅@vinayakshahdeo对您的问题的评论

---

注意：我添加的一些

wait

关键字可能不是必需的。我不太熟悉您正在使用的库。

这是一个内部异步调用，用于更新状态，因此当您设置加载状态时，它在开始时为true，然后在上一个调用完成之前变为false，如果您可以共享沙盒，usestate将加载设置为false。我可以发布正确答案。共享代码沙盒链接我们will Check这不会阻止

设置加载

在

导出数据

函数中立即变回

false

。@BarryMichaelDoyle我检查了他的数据是否太小，无论我们做什么，都会处理得非常快这些解决方案中的一个可能你有带wokring的codepen？你确定你添加了

async

中的关键字？