Использование fetch с реакцией-excel-workbook

Question

Моя проблема заключается в том, что Excel Export экспортирует данные в 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 возвращает данные, когда выборка завершена (обещание разрешено). В вызове 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>
    );
  }

Надеюсь, это поможет.