我正在尝试重置路由器上的状态。push我有一个具有搜索选项的标头组件，当用户搜索某个路由器时。push将其发送到“/search/${search}”因此基本上在搜索页面（SSR）上
在搜索组件上，我为loadMore功能设置了限制和跳过，当我尝试从主页或任何其他页面搜索内容时，由于搜索页面呈现和跳过，限制被重置

问题-我的主要问题是，当我试图从搜索页面搜索东西，然后跳过和限制旧状态值保持不变不改变路由器。推但当我重新加载页面的状态得到重置。为什么？

• 我的路由器。按下标头组件 * -

const Header = ({searched }) => {
  const [values, setValues] = useState({
    search: "",
  });
  const { search } = values;
  const router = useRouter();
  useEffect(() => {
    setHydrated(true);
    // getPage();
    // setValues({ ...values, search: searched });
    console.log(searched);
  }, []);
  if (!hydrated) {
    return null;
  }

return (
        <React.Fragment>
          <h1 className="d-flex align-items-center mb-3 justify-content-between">
            <span className="">Feature Request</span>
            <div className="d-flex align-items-center">
              <Input
                className="search"
                placeholder="Search Something..."
                value={search}
                onChange={(e) => {
                  setValues({ ...values, search: e.target.value });
                }}
              />
              <AiOutlineSearch
                onClick={() => {
                  router.push(`/search/${search}`);
                }}
                size={25}
              />
            </div>
          </h1>

          <p>Your Suggestion Matters</p>
        </React.Fragment>
      );
    }

我的搜索页面-

import React from "react";
import { Button, Card, CardText, CardTitle, Col, Container } from "reactstrap";
import Layout from "../../components/Layout";
import Link from "next/link";
import { useState, useEffect } from "react";
import { searchData } from "../../api/page";
import { getCookie } from "../../api/auth";
import { useRouter } from "next/router";
import InfiniteScroll from "react-infinite-scroll-component";
const SearchPage = ({ data }) => {
  const [values, setValues] = useState({
    pages: [],
    skip: 0,
    limit: 5,
    hasMore: true,
  });
  const { pages, skip, limit, hasMore } = values;
  const router = useRouter();
  const token = getCookie("token");
  const getSearchedData = async () => {
    console.log(hasMore);
    await setValues({ ...values, skip: 0, limit: 5 });

    const search = router.query.search;
    await searchData(search, skip, limit).then((data) => {
      if (data.error) {
        console.log(data.error);
      } else {
        setValues({ ...values, pages: data, skip: 0 });
      }
    });
  };
  useEffect(() => {
    getSearchedData();
    console.log("UseEffect chal gya");
  }, [data]);

  const mapSearchData = () => {
    return pages.map((p, i) => {
      return (
        <div key={i} className="mt-4">
          <Card body className="manual-card">
            <CardTitle tag="h5">{p.title}</CardTitle>
            <CardText>{p.excerpt}</CardText>
            <Button color="primary" className="w-25" size="sm">
              <Link href={`/pages/${p.slug}`}>Go To Page</Link>
            </Button>
          </Card>
        </div>
      );
    });
  };
  const fetchMoreData = () => {
    console.log("Best");
    const search = router.query.search;
    let toSkip = skip + limit;
    searchData(search, toSkip, limit).then((data) => {
      if (data.error) {
        console.log(data.error);
      } else {
        const tempArray = [...pages, ...data];
        setValues({
          ...values,
          pages: tempArray,
          skip: toSkip,
          hasMore: !(data.length < limit),
        });
      }
    });
  };

  return (
    <Layout search={router.query.search}>
      <Container className="mt-5">
        <Col>
          {pages && pages.length ? (
            mapSearchData()
          ) : (
            <div className="">No Such Pages Present!</div>
          )}
          {hasMore && (
            <Button
              className="d-flex mx-auto my-4"
              color="primary"
              onClick={fetchMoreData}
            >
              Load More
            </Button>
          )}
        </Col>
        ;
      </Container>
    </Layout>
  );
};

export default SearchPage;

export async function getServerSideProps(context) {
  const { search } = context.query;
  // console.log(slug);
  if (!search) {
    return {
      props: { data: null },
    };
  }
  let result = null;
  try {
    const res = await fetch(
      `${process.env.NEXT_PUBLIC_API}/pages/search/${search}`
    );
    result = await res.json();
  } catch (error) {
    return {
      props: { data: null },
    };
  }
  return {
    props: { data: result },
  };
}

当我在任何其他页面，而不是搜索页面，然后router.push工作正常，它重置跳过和限制，并获取所有数据开始
但是，当我在搜索页面本身，我从那里搜索的东西，然后跳过和限制状态不会改变，数据被提取的基础上跳过和限制，并在页面重新加载我得到完整的数据与跳过和限制重置。