react路由器v6扩展搜索参数而不是替换它
react路由器v6扩展搜索参数而不是替换它
提问于 2021-12-13 04:19:00
目前，执行setSearchParams(/* an object */)将取代现有的搜索参数。如果我想扩展搜索参数，而不是替换它们，例如添加一个新的param。实现这一目标的最优雅的方法是什么？
我知道我可以直接修改searchParams，然后做一些类似setSearchParams(newSearchParamsToObject)的事情。然而，因为searchParams不是一个对象而是一个URLSearchParams。代码又长又丑。
编辑:既然有人出现了，就不明白我贴了什么
目前，如果我们这样做：
const [searchParams, setSearchParams] = useSearchParams({ a: 1 });
setSearchParams({ b: 2 });它将用searchParams取代?b=2。
我想要实现的是将b=2添加到现有的搜索参数中，即最终的搜索参数应该是?a=1&b=2。
回答 3
Stack Overflow用户
发布于 2021-12-13 05:48:19
我认为设置要添加的搜索param值非常简单。
const [searchParams, setSearchParams] = useSearchParams();
...
searchParams.set(newParamKey, newParamValue);
setSearchParams(searchParams);
const [searchParams, setSearchParams] = useSearchParams();
const clickHandler = () => {
searchParams.set("b", 2);
setSearchParams(searchParams);
};
...
<button type="button" onClick={clickHandler}>
Add "b=2" param
</button>似乎也有效：
setSearchParams([...searchParams.entries(), ['b', 2]]);
Stack Overflow用户
发布于 2022-03-30 14:26:05
您还可以使用URLSearchParams.append(name, value)方法，以防需要几个'b‘。
setSearchParams(searchParams.append('b', 2));这不是你修改状态的方式，这里。您只是在操纵一个URLSearchParams对象。你不用担心变异。
Stack Overflow用户
发布于 2022-11-16 13:46:31
这里的路由器v6解决方案(不知道是否也适用于以前的版本)：setSearchParams接受一个应该返回新搜索参数的函数，实际上给出了以前的值
例如：
setSearchParams(prev => ([...prev.entries(), ['foo', 'bar']]);这基本上类似于@Drew的回答，但使用以前的“状态”，就像使用React中的useState一样。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70329879
复制相关文章
相似问题
腾讯云开发者
