Reast - useSearchParams的使用

Reast - useSearchParams的使用

一、引入 useSearchParams

import { useSearchParams } from "react-router-dom";

二、模拟请求参数

请求参数是 id=1&type=update&title=编辑

三、使用 useSearchParams() 解析参数

let [searchParams, setSearchParams] = useSearchParams();    

四、使用 searchParams 中的函数，如下

// 1.使用 get() 或者 getAll 函数获取请求参数，如下
const id = searchParams.get('id')      // 字符串： 1
const id = searchParams.getAll('id')   // 数组： ['1']

// 2.使用 has() 函数判断请求参数是否存在查询的属性,如下：
const isHasId = searchParams.has('id') // true 或者 false

// 3.使用 delete() 函数删除指定请求参数，如下
searchParams.delete('id')
const id = searchParams.get('id')      // null,已删除

// 4.使用 append() 函数追加到 searchParams 数组中，如下：
searchParams.append('name',"张三")
const desc = searchParams.get('name')  // 张三

// 5.使用 forEach() 函数迭代遍历 searchParams 中的参数
searchParams.forEach(function(value, key) { 
    console.log(key,value);            // id,1、type,update、title,编辑     
});

// 6.使用 keys() 和 values() 函数迭代遍历   中的键和值
for(var key of searchParams.keys()) {  
    console.log("key:",key);           // id、type、title
}
for(var value of searchParams.values()) {  
    console.log("value:",value);       // 1、编辑、update
}

// 7. 返回适合在URL中使用的查询字符串
const paramsQueryStr = searchParams.toString();     // 返回：id=1&type=update&title=%E7%BC%96%E8%BE%91

// 8. 使用 sort() 排序，按照键值升序
searchParams.sort();
const paramsQueryStr = searchParams.toString();     // 返回：id=1&title=%E7%BC%96%E8%BE%91&type=update

// 9. 使用 set() 设置请求参数
searchParams.set('id', '2');           // id由原来 1 ,变为 2

// 10. 使用 fromEntries() 方法把键值对列表转换为一个对象
console.log(Object.fromEntries(searchParams));      // 返回值：{id: '1', title: '编辑', type: 'update'}