React reseting states

Question

I have a component that renders a Datatable from primereact. I am loading the data from the server, and I am setting an offset state in the main component to manage the pagination. Everything is good, but when I try to change the page in the Datatable it changes, but it quickly resets itself to its initial state.

You can see that the offset always returns to value 0 when it changes. That happends only by clicking the next page in the Datatable.

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 (
        <div className=' p-grid growable p-container'>
                <ClientsTable
                    loading={loading}
                    value={clientes}
                    emptyMessage='Error message'
                    rows={10}
                    total={total}
                    first={offset}
                    onPage={({ first }) => setOffset(first)}
                />
        </div>
    );
}

export default Clientes

The Datatable:

import React from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';

const ClientsTable = ({
    loading,
    value,
    emptyMessage,
    rows,
    total,
    onPage,
    first,
}) => (
        <DataTable
            totalRecords={total}
            loading={loading}
            value={value}
            paginator
            lazy
            paginatorTemplate='FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
            emptyMessage={emptyMessage}
            rows={rows}
            onPage={onPage}
            first={first}
        >
            <Column
                body={(rowData) => `${rowData.name} ${rowData.surname}`}
                header='name'
                headerStyle={{ width: '14em' }}
            />
            <Column
                field='email'
                header='email'
                headerStyle={{ width: '14em' }}
            />
            <Column
                body={() => `Activa`}
                header='State'
                headerStyle={{ width: '7em' }}
            />
        </DataTable>
    );

export default ResponsiveDataTable;

Any idea why is the offset state resetting? Thank You for all the advices.

I had this happen to me when I accidentally added a circular state update through something like a `useEffect` with misfitting dependencies. — mRcSchwering, Nov 08 '21 at 13:56
Yes, I thought the same, but I do not have any useEffect in any component.. — Michal Ružička Ružička, Nov 08 '21 at 13:57
Ah, I think you actually need to put the handling of `data?.clients` into a `useEffect` with a `data?.clients` dependency — mRcSchwering, Nov 08 '21 at 14:04
I am not so familiar with `DataTable` `onPage` prop. Is it supposed to work by just passing a `setState` function? — mRcSchwering, Nov 08 '21 at 14:06
The useEffect trick didn't work, but It does make sense, the `useQuery` triggers to re-render the component and You do not need to use the `useEffect`. — Michal Ružička Ružička, Nov 08 '21 at 14:09
`onPage` function gives You the current state of the datatable in this way: `onPage({ page, first, totalRecords}) => do something with the state...` It runs every time You change page. — Michal Ružička Ružička, Nov 08 '21 at 14:11
In the docs they do `onPage={(e) => setFirst(e.first)` btw (not `setFirst(e)`) — mRcSchwering, Nov 08 '21 at 14:15
Yes, I am using it that way in my component: `onPage={({ first }) => setOffset(first)}` — Michal Ružička Ružička, Nov 08 '21 at 14:19
My last guess would be `{ items: clientes = [], total = 0 } = data?.clients || {}`. I usually do any kind of processing in a pure js function. I'm kind of paranoid with just assigning things in the render function. You could write a pure function that takes `data` and returns a new array and an int. — mRcSchwering, Nov 08 '21 at 14:28

React reseting states

0 Answers0