React中更新查询参数的解决方案是什么？

Question

更改查询参数时，我在更新产品时遇到问题。例如，我的链接是

http://localhost:5173/?page=2

，那么useProductQuery钩子将返回第2页上的产品（我为此编写了API和钩子，并且它工作正常）。但是更新数据还是不行，如下代码所示

 const [pageNum, setPageNum] = useState<string | null>(null)
    
    const location = useLocation();
    useEffect(()=>{
        const searchParams = new URLSearchParams(location.search);
        const page = searchParams.get('page');
        setPageNum(page)
        
    },[location.search])
    
    console.log(pageNum)
    const { isLoading:isPld, isError:isPe, data:productData } = useProductQuery(pageNum)
    const modifiedProductData = productData as IProduct[] ;
    useEffect(() => {
  console.log(productData);
}, [productData]);

我尝试创建一个状态并保存传递给

useProductQuery

挂钩的值，并使用

useEffect

捕获查询参数更改事件。当这个事件被捕获时，它会将状态设置为一个新值，当有一个新值时，我希望我的

useProductQuery

钩子再次运行，从而从另一个页面返回产品。

Answer 1

因为

pageNum

是一种状态，所以它会异步更新，并且更新的值仅在下一次渲染时可用。 如果您检查

console.log(pageNum)

的结果，您会发现它出现了两次 - 1 是之前的值，2 是更新后的值。

您实际上并不需要状态，而是直接使用值（a

const

）。

const location = useLocation();

const pageNum = new URLSearchParams(location.search).get('page');

console.log(pageNum)
const {
  isLoading: isPld,
  isError: isPe,
  data: productData
} = useProductQuery(pageNum)