该useSearchParams
钩子允许我们传入一个defaultInit
参数:
declare function useSearchParams(
defaultInit?: URLSearchParamsInit
): [URLSearchParams, SetURLSearchParams];
type URLSearchParamsInit =
| string
| ParamKeyValuePair[]
| Record<string, string | string[]>
| URLSearchParams;
谁能帮我理解这个参数应该如何使用?当我使用此参数时,我的值不会添加到浏览器中的 URL。为了更新搜索参数,我仍然需要在调用钩子后调用设置器。
例如:
const myDefaults = {
one: 'A',
two: 'B'
};
// Passing in myDefaults here does not affect the URL in the browser
const [searchParams, setSearchParams] = useSearchParams(myDefaults);
// I have to additionally call useSearchParams to update the URL in the browser
useEffect(() => {
setSearchParams(myDefaults);
}, []);
这是预期的吗?如果是这样,该参数的目的是什么defaultInit
?
defaultInit
使用这样的方式,当 URL 中不存在时,您可以从定义的默认搜索参数中读取,如果不存在,则不会更新 URL。例如,如果默认值为,
category
但1
用户在没有此查询参数的情况下打开了页面:https://example.com
。在这种情况下,您可以为这些查询参数设置默认值,以便可以读取值:
这或多或少类似于以下内容:
但请注意,一旦您致电
setSearchParams
,该规定defaultInit
将不再生效。参考:https ://github.com/remix-run/react-router/blob/89049ce4ee1b265b78468f25eb494eef240a7e40/packages/react-router-dom/index.tsx#L1453-L1455
编辑:如果你想自动更新搜索参数(如果它不存在),你可以编写一个像这样的实用函数(未经测试):