如何删除多个 url 参数

Question

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

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

Answer 1

用这个

改变你的handleDeleteParams功能

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

Answer 2

如果要删除 *仅 selected（或任何特定的 queryString 键），您可以使用 queryString 参数URLSearchParams 对象的 delete 方法，然后将参数 URL update.

入队

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

...

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

Answer 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]));
  };

如何删除多个 url 参数

How to delete multiple url params

javascript

reactjs

react-router-dom