Not getting data when page change from 1 to 2

[mishraasaurabh]

pls any one can find the solution of that

here,
when page changed from 1 to 2 not getting current page data

import { json, LoaderFunction } from "@remix-run/node";
import { getPosts } from "/api/posts/new";
import { APIResponse } from "/types/responseData";
import { Post } from "/types/post";
import { useFetcher, useLoaderData } from "@remix-run/react";
import { useEffect, useState } from "react";
import Home from "/page/Home";

type LoaderData = {
results: APIResponse<Post[] | []>;
};

export const loader: LoaderFunction = async ({ request }) => {
const url = new URL(request.url);
const page = parseInt(url.searchParams.get("page") || "1", 10);

const results = await getPosts({ page, limit: 10 });
return json<LoaderData>({ results });

};

const Dashboard = () => {
const { results } = useLoaderData();
const fetcher = useFetcher();

const [currentPage, setCurrentPage] = useState(1);
const [posts, setPosts] = useState(results.data);
const [totalPages, setTotalPages] = useState(Math.ceil(results.pagination?.total / 10) || 1);

useEffect(() => {
    if (currentPage !== 1) {
        fetcher.load(`?page=${currentPage}`);
    }
}, [currentPage]);

useEffect(() => {
    if (fetcher.data) {
        setPosts(fetcher.data.results.data);
        setTotalPages(Math.ceil(fetcher.data.results.pagination?.total / 10) || 1);
    }
}, [fetcher.data]);

return (
    <Home
        posts={posts}
        currentPage={currentPage}
        totalPages={totalPages}
        setCurrentPage={setCurrentPage}
    />
);

};

export default Dashboard;

export const getPosts = ({page, limit}: getPostProps) => {
const queryParams = new URLSearchParams({
page: String(page),
limit: String(limit),
});
return request<APIResponse<Post[]>>("GET", /api/posts?${queryParams.toString()});
};

[sergiodxa]

From what I saw, you copy the loader data to a state

If the param change but it's the same route the loader data will update but React (not Remix, React) will not re mount the component so the state is left untouched

Instead use the loader data directly, or move your code to another component and use location.key (from useLocation) to force that other component to re mount on a navigation