使用与React-Excel-workbook一起获取

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

解决此问题的一种可能解决方案是使用组件状态存储您的数据。因此，让我们假设呼叫以在提取完成后返回getDataForexport函数返回数据(已解决承诺已解决(。在当时的((呼叫中，您可以将该数据分配给状态：

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

希望这会有所帮助。