代码之家 › 专栏 › 技术社区 › sir-haver

Nextjs useSearchParams未正确更新

next.js reactjs

-1

sir-haver · 技术社区 · 9 月前

我创建了一个简单的React钩子来更新搜索参数:

import { useSearchParams, usePathname, useRouter } from "next/navigation";

export const useParams = () => {
  const searchParams = useSearchParams();
  const router = useRouter();
  const pathname = usePathname();

  const setParams = (key: string, value: string) => {
    const params = new URLSearchParams(searchParams);
    params.set(key, value);
    router.replace(`${pathname}?${params}`);
  };

  return { setParams };
};

然后我在客户端组件中使用它:

export const Pagination = () => {
  const { setParams } = useParams();

  const handleChangePageSize = (size: number) => {    
    setParams("pageSize", size.toString());
  };

  const handleSetPage = (pageNumber: number) => {
    setParams("pageNumber", pageNumber.toString());
  };
// ... More code

我的问题是 handleChangePageSize 被调用,并且 pageSize param设置了一个值,当以后 handelSetPage 被调用,它不知道 页面大小 ,已设置。更准确地说,钩子滞后一个变化。如果我删除 router.replace 在钩子内部(用于测试),如果我调用 句柄更改页面大小 两次,例如值为3,然后为6,然后当我调用 handleSetPage ,params的值将为3,因此它滞后1。

为什么它会滞后?我该如何纠正我的勾手?

1 回复 | 直到 9 月前

DMabulage 9 月前

尝试创建一个状态来跟踪参数

import { useState } from "react";
import { useSearchParams, usePathname, useRouter } from "next/navigation";

export const useParams = () => {
  const searchParams = useSearchParams();
  const router = useRouter();
  const pathname = usePathname();

  const [params, setParamsState] = useState(new URLSearchParams(searchParams));

  const setParams = (key: string, value: string) => {
    const updatedParams = new URLSearchParams(params);
    updatedParams.set(key, value);
    setParamsState(updatedParams);
    router.replace(`${pathname}?${updatedParams.toString()}`);
  };

  return { setParams };
};

第.tsx页

 const { setParams } = useParams();

  const handleChangePageSize = (size: number) => {
    setParams('pageSize', size.toString());
  };

  const handleSetPage = (pageNumber: number) => {
    setParams('pageNumber', pageNumber.toString());
  };


<button
        onClick={() => {
          handleChangePageSize(Math.floor(Math.random() * 100));
        }}
      >
        Set Page Size
      </button>

      <button
        onClick={() => {
          handleSetPage(Math.floor(Math.random() * 100));
        }}
      >
        Set Page
      </button>

推荐文章

daniel sas · NextJS和React无法读取未定义的属性,element.map不是函数

2 年前

Berendschot · 将条件类与静态类NextJS相结合

2 年前

Demonix · React Firebase onSnapshot为映射函数返回null

2 年前

wannnwdooo · Nextjs中的图像

2 年前

Vida Khalili · 如何在Nextjs中设置背景图像?

2 年前

Rohit Jambhulkar · 在javascript中使用情绪/样式时出现服务器错误

2 年前

Kiki · TypeError:无法读取null的属性(读取“\u传单\u禁用\u单击”)

2 年前

bami · 动态SSG页需要getStaticPaths,而地址缺少getStaticPaths

2 年前

YaddyVirus · NextJS API中where子句中的未知列

2 年前

m m · 获取未定义或承诺{<pending>}尝试推送到数组[重复]

2 年前