excel - 使用 fetch 和 react-excel-workbook
问题描述
我的问题是 Excel 导出在提取完成之前将数据导出到 Excel。
我想要实现的目标:点击按钮时获取数据,然后在获取所有数据后,将数据导出到excel。注意我不想在第一次渲染组件时获取数据。
这只是我的尝试之一:
class ExcelExport extends React.Component {
getDataForExport = () => {
get('/uri')
.then((response) => response.items)
.catch((error) => []);
};
render() {
return (
<Workbook element={<input type="button" value="Excel Export" />}>
<Workbook.Sheet data={() => this.getDataForExport()} name="Sheet A">
<Workbook.Column label="Foo" value="foo"/>
</Workbook.Sheet>
</Workbook>
);
}
}
感谢您的任何帮助。
解决方案
此问题的一种可能解决方案是使用组件状态来存储您的数据。因此,让我们假设 getDataForExport 函数中的 get 调用在获取完成时返回数据(承诺已解决)。在 then() 调用中,您可以将该数据分配给状态,如下所示:
class ExcelExport extends React.Component {
constructor() {
super();
this.state = { data: null }
}
getDataForExport = () => {
get('/uri')
.then((response) => {
this.setState({ data: response });
})
.catch((error) => []);
};
...
}
然后在您的渲染函数中,您可以添加一个触发数据获取的按钮,然后检查 this.state.data 是否为空或是否包含某些数据并根据此渲染不同的内容:
render() {
return (
<Workbook element={<input type="button" value="Excel Export" onClick={this.getDataForExport.bind(this)} />}>
{this.state.data ||
<Workbook.Sheet data={this.state.data} name="Sheet A">
<Workbook.Column label="Foo" value="foo"/>
</Workbook.Sheet>}
</Workbook>
);
}
希望这可以帮助。
推荐阅读
- xml - 适合文献研究的数据库
- amazon-web-services - 如何将 ECSCredentials 与 AWS 开发工具包一起使用?
- python - Pandas Q-cut:使用扩展窗口方法对数据进行分箱
- debugging - QTCreator“开始调试”在 WSL Ubuntu 18.04 LTS 中挂起
- odoo - 如何在 Odoo 上仅显示和保存一个值?
- vue.js - 如何在 Vue 和 Quill 中使用 href
- oracle-sqldeveloper - SQL Developer 未打开首选项中设置的特定文件夹路径
- r - 将年份向量转换为具有范围间隔的单个字符串
- python - 在 python 中用于打印格式时无法打印字典值
- c++ - 在 wxWidgets 中将字符串存储为 wstring 或 wxString?