React-router v6 扩展搜索参数而不是替换它

Question

目前，这样做setSearchParams(/* an object */)将替换现有的搜索参数。如果我想扩展搜索参数而不是替换它们，例如添加新参数。实现这一目标的最优雅的方式是什么？

我知道我可以直接修改searchParams，然后做类似的事情setSearchParams(newSearchParamsToObject)。然而，sincesearchParams不是一个对象，而是一个URLSearchParams。代码会又长又难看。

编辑：因为有人似乎不明白我发布的内容

目前，如果我们这样做：

const [searchParams, setSearchParams] = useSearchParams({ a: 1 });
setSearchParams({ b: 2 });

它将替换searchParams为?b=2.

我想要实现的是添加b=2到现有的搜索参数，即最终的搜索参数应该是?a=1&b=2.

Answer 1

我想设置您想要添加的搜索参数值应该很简单。

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>

react-router@6.4now中引入的setSearchParams还需要一个类似于useState钩子的函数来访问之前的查询参数对象以进行更新。

setSearchParams(searchParams => {
  searchParams.set("b", 3);
  return searchParams;
});

如果您在挂钩setSearchParams中使用，这会很方便useEffect，因为您不需要将当前searchParams对象列为外部依赖项。

Answer 2

我只是在做类似的事情，这就是我发现的。

如上所述，您可以使用searchParams.set, 也可以使用searchParams.append. 不同的是，当使用 时append，它会添加新的搜索参数，即使它具有相同的名称。

因此对于给定的搜索参数?a=123&b=456：

setSearchParams((prevParams) => {
  prevParams.append('b', "789");
});

// output -> "?a=123&b=456&b=789"

但如果你使用set结果会被覆盖

setSearchParams((prevParams) => {
  prevParams.append('b', "789");
});

// output -> "?a=123&b=789"

但是，如果您有更多搜索参数并且不想重复set或append针对每个参数，则可以将对象扩展与entries()和组合使用Object.entries()

const newSearchParams = {
  a: 111,
  c: 000,
};

setSearchParams((prevParams) => {
  return new URLSearchParams({
    ...Object.fromEntries(prevParams.entries()),
    ...newSearchParams,
  });
});

// output -> "?a=111&b=456&c=000"