Question

我的问题是Excel导出在获取完成之前将数据导出到Excel。

我想要实现的目标：单击按钮时获取数据，然后在获取所有数据后，将数据导出到excel。 NB 我不想在第一次呈现组件时获取数据。

这只是我的一次尝试：

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

感谢您的帮助。

Answer 1

此问题的一种可能解决方案是使用组件状态来存储数据。因此，假设调用get getDataForExport函数在fetch完成时返回数据（promise已解决）。在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是否为null或是否包含一些数据并根据它提供不同的东西：

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

希望这有帮助。

使用fetch-excel-workbook获取

1 个答案: