如何删除多个url参数答案

【问题标题】：How to delete multiple url params如何删除多个url参数
【发布时间】：2022-01-12 10:56:00
【问题描述】：

删除多个字符串参数时出现问题。现在只删除最后一个参数。

upd：我没有指定我想要实现移除特定参数值的能力

此代码无法正常工作：

const updateFiltersSearchParams = (paramKey, newValue) => {
    const isParamExist = searchParams.getAll(paramKey).includes(newValue);

    if (!isParamExist) {
      searchParams.append(paramKey, newValue);
      setSearchParams(searchParams);
    } else {
      const updatedSearchParams = new URLSearchParams(
        [...searchParams].filter(
          ([key, value]) => key !== paramKey || value !== newValue
        )
      );
      setSearchParams(updatedSearchParams);
    }
  };

const handleDeleteParams = () => {
    [...checkboxParams].forEach((param) => {
      updateFiltersSearchParams("selected", param);
    });
  };

Sandbox

【问题讨论】：

在 forEach 中快速设置状态而不基于状态先前值的更改，可能会导致更改似乎被跳过。
@DBS 我怎样才能考虑到以前的值？

标签： javascript reactjs react-router-dom

【解决方案1】：

用这个改变你的handleDeleteParams函数

const handleDeleteParams = () => {
  setSearchParams([]);
};

【讨论】：

此选项无效。可能还有其他参数或者需要排除特定值
@v.zdorovcev 这与我要提出的解决方案很接近，但也许您应该更新您的问题以包含 all 相关详细信息、要求和限制。

【解决方案2】：

如果您想删除 *仅 selected（或任何特定的 queryString 键）queryString 参数，您可以使用 URLSearchParams 的 delete 方法对象，然后将参数 URL 更新入队。

const handleDeleteParams = (key) => {
  searchParams.delete(key);
  setSearchParams(searchParams);
};

...

<button type="button" onClick={() => handleDeleteParams("selected")}>
  Clear all "selected" params
</button>

【讨论】：

【解决方案3】：

这样修改函数解决了问题

const toggleSearchParams = (params) => {
    const newSearchParams = [...searchParams];

    for (const prevParam of params) {
      const index = newSearchParams.findIndex(
        (newParam) =>
          prevParam[0] === newParam[0] && prevParam[1] === newParam[1]
      );

      if (index === -1) {
        newSearchParams.push(prevParam);
      } else {
        newSearchParams.splice(index, 1);
      }
    }

    setSearchParams(new URLSearchParams(newSearchParams));
  };

  const handleChangeCheckBoxValue = (e) => {
    toggleSearchParams([["selected", e.target.value]]);
  };

  const handleDeleteParams = () => {
    toggleSearchParams(checkboxParams.map((param) => ["selected", param]));
  };

【讨论】：