使用 fetch 和 react-excel-workbook

Question

我的问题是 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>
    );
  }
}

感谢您的帮助。

Answer 1

解决此问题的一种可能方法是使用组件状态来存储您的数据。因此，让我们假设 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 是否为 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>
    );
  }

希望这会有所帮助。