Reactjs 在查询完全完成之前下载excel文件

我习惯了图书馆

我的问题是，我在完成查询之前创建了excel文件，现在我必须按两次才能使其正常工作

代码：

从“反应数据导出”导入反应导出；
const ExcelFile=ReactExport.ExcelFile；
const ExcelSheet=ReactExport.ExcelFile.ExcelSheet；
从“axios”导入axios；
类主扩展组件{
构造函数（）{
超级（）；
此.state={
多数据集：[]
}
this.getDataExcel=this.getDataExcel.bind（this）；
}
getDataExcel（）{
让自我=这个；
获取（'/app/webapi/datos/excel'
).然后（功能（响应）{
self.setState（{multiDataSet:response.data}）；
})
.catch（函数（错误）{
console.log（错误）；
});
}   
render（）{
返回(
);
)

---

如何等待查询完成以创建excel？

您可以在组件装载时开始提取数据（在单击下载按钮之前），并仅在提取数据后呈现excel文件。如下所示：

class Main extends Component {
    constructor() {
        super();
        this.state = {
            fetching: true,
            multiDataSet: null,
        }
        this.getDataExcel = this.getDataExcel.bind(this);
    }

    componentDidMount() {
        // ********* the data is fetched on component mount, before the download button appears *********
        this.getDataExcel();
    }

    getDataExcel() {
        let self = this;
        axios.get('/app/webapi/datos/excel'
            ).then(function (response) {
                self.setState({ multiDataSet: response.data, fetching: false });
            })
            .catch(function (error) {
                console.log(error);
                self.setState({ fetching: false });
            });
    }   

    render() {
        const { fetching, multiDataSet } = this.state;
        if (fetching) return <div>Loading...</div>;
        if (!multiDataSet) return <div>Failed to fetch data</div>;

        return (
            // ********* notice I removed the onClick event from the button *********
            <ExcelFile name="excel2" filename="excelDatos" element={<Button label="Exportar" icon="fa fa-file-excel-o"/>}>
                <ExcelSheet dataSet={this.state.multiDataSet} name="Datos_Excel"/>
            </ExcelFile>
        );
    }
}

类主扩展组件{
构造函数（）{
超级（）；
此.state={
真的，
多数据集：空，
}
this.getDataExcel=this.getDataExcel.bind（this）；
}
componentDidMount（）{
//*******在“下载”按钮出现之前，数据在组件装载时获取*********
这是一个.getDataExcel（）；
}
getDataExcel（）{
让自我=这个；
获取（'/app/webapi/datos/excel'
).然后（功能（响应）{
self.setState（{multiDataSet:response.data，fetching:false}）；
})
.catch（函数（错误）{
console.log（错误）；
self.setState（{fetching:false}）；
});
}   
render（）{
const{fetching，multiDataSet}=this.state；
如果（提取）返回加载。。。；
如果（！multiDataSet）返回无法获取数据；
返回(
//*******注意，我从按钮中删除了onClick事件*********
);
}
}

按两下是什么意思？一段时间后双击还是再次单击？@UmairFarooq一段时间后再次单击请在codesandbox中共享代码

class Main extends Component {
    constructor() {
        super();
        this.state = {
            fetching: true,
            multiDataSet: null,
        }
        this.getDataExcel = this.getDataExcel.bind(this);
    }

    componentDidMount() {
        // ********* the data is fetched on component mount, before the download button appears *********
        this.getDataExcel();
    }

    getDataExcel() {
        let self = this;
        axios.get('/app/webapi/datos/excel'
            ).then(function (response) {
                self.setState({ multiDataSet: response.data, fetching: false });
            })
            .catch(function (error) {
                console.log(error);
                self.setState({ fetching: false });
            });
    }   

    render() {
        const { fetching, multiDataSet } = this.state;
        if (fetching) return <div>Loading...</div>;
        if (!multiDataSet) return <div>Failed to fetch data</div>;

        return (
            // ********* notice I removed the onClick event from the button *********
            <ExcelFile name="excel2" filename="excelDatos" element={<Button label="Exportar" icon="fa fa-file-excel-o"/>}>
                <ExcelSheet dataSet={this.state.multiDataSet} name="Datos_Excel"/>
            </ExcelFile>
        );
    }
}