Фабрика пагинации и пагинация API Django

Моя цель состоит в том, чтобы сделать пагинацию результатов для пагинации react-bootstrap-table2 с помощью Django api.

Моя проблема в том, что таблица получает данные из массива results от конечной точки api. Это приводит к тому, что я должен установить состояние с данными внутри results. В настоящее время api ограничивает смещение 100 на запрос.

Вместо этого мне понадобится count, next конечная точка и prev, если применимо. Как я могу получить следующий бит данных из смещения?

Еще одна проблема, связанная с этим, когда я делаю запрос без добавления .results на setMealDashboard(data), я получаю undefined и он ожидает массив, несмотря на добавление results.id к столбцам. Как я могу обойти это, чтобы все было в состоянии mealDashboardData?

Pagination Const:

const pagination = paginationFactory({
    sizePerPage: 50,
    showTotal: true,
  });

Мои данные:

count: 600
next: "http://localhost:8000/api/meals/?limit=100&offset=100"
previous: null
results: [.....

const [mealDashboardData, setMealDashboard] = useState([]);

useEffect(() => {
    const getMealDashboard = async () => {
      try {
        const { data } = await fetchContext.authAxios.get(
          `/api/meals/`
        );
        setMealDashboard(data.results);
        console.log(data);
      } catch (err) {
        console.log(err);
      }
    };

    getMealDashboard();
  }, [fetchContext]);

Мой компонент:

<ToolkitProvider
          bootstrap4
          keyField="id"
          data={mealDashboardData}
          columns={columns}
          search
        >
          {(props) => (
            <div>
              <div className="search float-right">
                <SearchBar {...props.searchProps} />
                <button
                  type="button"
                  className="btn"
                  onClick={() => props.searchProps.onSearch('')}
                >
                  X
                </button>
              </div>
              <BootstrapTable
                {...props.baseProps}
                filter={filterFactory()}
                pagination={pagination}
                striped
                hover
                condensed
                expandRow={expandRow}
                wrapperClasses="table-responsive"
                noDataIndication={() => <Loader />}
              />
            </div>
          )}
        </ToolkitProvider>

Вернуться на верх