Блог

У меня есть компонент, который отображает данные из primereact. Я загружаю данные с сервера и устанавливаю offset состояние в главном компоненте для управления разбиением на страницы. Все хорошо, но когда я пытаюсь изменить страницу в таблице данных, она меняется, но быстро возвращается в исходное состояние.

Вы можете видеть, что offset при изменении значение всегда возвращается к значению 0. Это происходит только при нажатии на следующую страницу в таблице данных.

 import React, { useState } from 'react'; import { useQuery } from '@apollo/client'; import '../../layout/customs/responsiveDatatable.scss'; import { clientAuthApiKey as client } from '../../client'; import { query } from '../../graphql/queries'; import ClientsTable from './ClientsTable';  function Clientes() {  const [searchInput] = useState('');  const [offset, setOffset] = useState(0);   const queryParams = {  client,  variables: {  input: {  pagination: { limit: 10, offset },  search: {  searchFields: ['name', 'email', 'document_id'],  searchTerm: searchInput || '',  },  orderBy: { field: 'name', direction: 'ASC' },  },  },  };   const { data, loading } = useQuery(query, queryParams);   const { items: clientes = [], total = 0 } = data?.clients || {};   console.log({ offset, loading, total });   return (  lt;div className=' p-grid growable p-container'gt;  lt;ClientsTable  loading={loading}  value={clientes}  emptyMessage='Error message'  rows={10}  total={total}  first={offset}  onPage={({ first }) =gt; setOffset(first)}  /gt;  lt;/divgt;  ); }  export default Clientes  

Данные, которые можно получить:

 import React from 'react'; import { DataTable } from 'primereact/datatable'; import { Column } from 'primereact/column';  const ClientsTable = ({  loading,  value,  emptyMessage,  rows,  total,  onPage,  first, }) =gt; (  lt;DataTable  totalRecords={total}  loading={loading}  value={value}  paginator  lazy  paginatorTemplate='FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'  emptyMessage={emptyMessage}  rows={rows}  onPage={onPage}  first={first}  gt;  lt;Column  body={(rowData) =gt; `${rowData.name} ${rowData.surname}`}  header='name'  headerStyle={{ width: '14em' }}  /gt;  lt;Column  field='email'  header='email'  headerStyle={{ width: '14em' }}  /gt;  lt;Column  body={() =gt; `Activa`}  header='State'  headerStyle={{ width: '7em' }}  /gt;  lt;/DataTablegt;  );  export default ResponsiveDataTable;   

Есть идеи, почему offset состояние сбрасывается? Спасибо Вам за все советы.