Подкомпонент React Table возвращает другую таблицу

У меня есть приведенная ниже таблица React, в которой у меня есть данные в основной таблице, и если вы нажмете на любую стрелку, я покажу другую таблицу под этой строкой. Проблема заключается в том, какую строку вы нажимаете, мне нужно сделать запрос API, получить данные, а затем отобразить. Проблема заключается в том, что возврат внутри this.getDetail не вносит визуальных изменений в подкомпонент. console.log(result) распечатайте правильный массив, полученный из API. Я уже настроил this.getDetail в async-await и работаю с промисом, чтобы получить данные. Как я могу исправить это, чтобы отображались полученные данные? Ниже подкомпонент просто возвращает 1

<ReactTable
  data={dataArray}
  columns={columns}
  defaultPageSize={5}
  noDataText="No Data"
  SubComponent={row => {
    this.getDetail(
      row.original.cusip,
      row.original.description,
      detailColumns
    ).then(function(result) {
      console.log(result);
      return (
        <ReactTable
          defaultPageSize={5}
          noDataText="No Data"
          columns={detailColumns}
          // data={Array.from(myDetail)}
          //resolveData={data => console.log(data)}
          //style={{ height: "400px" }}
          //showPagination={false}
        />
      );
    });
    return 1;
  }}
/>

reactjs asynchronous async-await react-table
person Extelliqent    schedule 05.06.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно привести данные в состояние. И как только ваш запрос API ответит, установите ответ в состоянии.

Итак, ваш код ReactTable будет таким

<ReactTable
  data={this.state.dataArray}
  ...
  .../>

Поэтому, когда состояние обновляется через this.setState({ dataArray: apiResonse });, ваша ReactTable будет отображаться.

person kiranvj    schedule 05.06.2019
comment
спасибо, но это не сработает, вот почему. Итак, скажем, первая строка, я щелкнул стрелку, получил данные и отобразил. Пока в этой строке отображаются дочерние данные, я щелкнул вторую строку, тогда данные первой строки будут пустыми, пока я извлекаю вторую строку... - person Extelliqent; 05.06.2019
comment
Вы должны сохранить всю информацию строки без изменений в состоянии, данные подстроки должны быть добавлены как новый ключ под каждой строкой. Таким образом, в вашем случае, как только вы извлечете подстроки строки 1, они будут сохранены в состоянии, снова когда вы извлечете данные подтаблицы строки 2, они будут добавлены в качестве нового ключа в строке 2 в состоянии. Таким образом, у вас будут данные для всех подтаблиц, которые вы нажали. @Extelliqent - person kiranvj; 05.06.2019
comment
Он по-прежнему не отображается, потому что к тому времени, когда я устанавливаю данные, он уже прошел через код таблицы реагирования, поэтому происходит сбой, говоря, что предоставленные данные не определены. React Table не ждет возврата запроса... - person Extelliqent; 05.06.2019
comment
Вы установили данные ответа в состояние. Если состояние обновляется, ReactTable повторно отображает обновленные данные. - person kiranvj; 06.06.2019