Невозможно реализовать загрузку данных из React-таблицы - PullRequest
Новая
       41

Невозможно реализовать загрузку данных из React-таблицы

0 голосов
/ 21 сентября 2019

Я тестирую данные на стороне сервера React-таблицы, чтобы отобразить огромное количество данных, извлеченных из веб-API, без сбоя браузера.С базовыми настройками таблицы реакции браузер не может обработать такое количество записей (500000) и сбой (он застревает в состоянии ожидания запроса).

Так что я нахожу данные со стороны сервера, которые, возможно, могут мне помочь.Я следовал инструкциям из документации, но машинопись набрала жалобы на данные, которые я пытаюсь использовать при обновлении состояния.

Это то, что у меня есть до сих пор:

Метод извлечения данных из веб-API: 

private fetchSales() {
  fetch(`http://localhost:50335/api/RK`)
    .then(response => response.json())
    .then(data =>
      this.setState({
        sales: data // here I get 500000 items 
      })
    )
}

Этот fetchSales вызывается в componentDidMount ().

Тогда внутри рендера есть компонент ReactTable: 

render() {
  const {
    sales,
    pages
  } = this.state;
  return ( 
    <div className = "App" >
    <ReactTable 
      data = {sales}
      manual 
      pages = {pages}
      defaultPageSize = {10}
      onFetchData = {this._fetchData}
      columns = {
      [{
          Header: "Region",
          accessor: "Region"
        },
        {
          Header: "Country",
          accessor: "Country"
        }]
      }
    />
    </div>
  );
}

В ReactTable есть вызов функции с именем _fetchData, и эта функция выглядит следующим образом: 

private _fetchData(state: any) {
  requestData(
    state.sales,
    state.pageSize,
    state.page
  ).
  then(res => {
    this.setState({
      sales: res.rows, // here typescript complain: "res is of type 'unknown'"
      pages: res.pages // here typescript complain: "res is of type 'unknown'"
    });
  })
}

Внутри setState объект res имеет тип 'unknown', а машинопись не нравится.

requestData - это функция, которая находится за пределами класса и получает продажи, pageSize и состояния страницы: 

const requestData = (sales: any, page: number, pageSize: number) => {
  return new Promise((resolve, reject) => {
    const res = {
      rows: sales.slice(pageSize * page, pageSize * page * pageSize),
      pages: Math.ceil(sales.length / pageSize)
    }

    resolve(res);
  })
}

Функция практически идентична той, что в документации я удалил фильтрацию и сортировку только потому, что они мне не нужны.Мне нужен только объект res, который возвращает функцию.

И я почти забыл об этом, внутри конструктора я присоединяю this к методу _fetchData: this._fetchData = this._fetchData.bind (this);

Почему машинопись печатает на объект res, который я пытаюсь использовать для установки состояния?

С уважением!Америко

1 Ответ

0 голосов
/ 21 сентября 2019

РЕДАКТИРОВАТЬ

Я заметил несколько ошибок. 

private _fetchData(state: any) {
  requestData(
    state.sales, // that should be state.data (state is the state of ReactTable)
    state.pageSize,
    state.page
...

Затем я заметил, что вы выполняете нумерацию страниц после извлечения данных.Но использование manual с onFetchData предназначено для обработки нумерации страниц на сервере .Например, с page и pageSize вы можете передать эти параметры в ваш API.В этом весь смысл нумерации страниц!

Пример из документации: 

onFetchData={(state, instance) => { //onFetchData is called on load and also when you click on 'next', when you change page, etc.
    // show the loading overlay
    this.setState({loading: true})
    // fetch your data
    Axios.post('mysite.com/data', {
      //These are all properties provided by ReactTable
      page: state.page,
      pageSize: state.pageSize,
      sorted: state.sorted,
      filtered: state.filtered
    })

Поскольку вы извлекаете все из них одновременно (почему, хотя? Ваш API на сервере не может обрабатывать нумерацию страниц? Таким образом, выне нужно будет ждать целую вечность, прежде чем результаты будут возвращены), тогда я предлагаю вам позволить ReactTable выполнить всю работу.

То есть вы просто делаете: 

<ReactTable
  columns={columns}
  data={data}
/>

ReactTable позаботитсянумерации страницИ теперь вы можете использовать свой запрос к API в ComponentDidMount.

Не могли бы вы вместо этого попытаться поместить всю логику в onFetchData.Я могу ошибаться, но мне кажется, вы неправильно поняли инструкции в документации.OnFetchData вызывается в ComponentDidMount, это не говорит о том, что вы должны поместить свою функцию туда. 

private _fetchData(state, instance) {

  const { page, pageSize } = state

  fetch(`http://localhost:50335/api/RK`)
    .then(response => response.json())
    .then(data =>
         let sales = data
         this.setState({
           sales: sales.slice(pageSize * page, pageSize * page * pageSize),
           pages: Math.ceil(sales.length / pageSize)
         });
    )
}

Что касается Typescript, то, что я понял, Typescript не имеет достаточно информации, чтобы вывеститип того, что возвращает ваше Promise.

Таким образом, вы должны явно аннотировать параметр универсального типа Promises: 

return new Promise<{ sales: object; pages: number; }>((resolve, reject) => { ... }
...