如何刪除多個 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);
    });
  };

沙盒

Answer 1

用這個改變你的handleDeleteParams function

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

Answer 2

如果您想刪除 *僅selected的（或任何特定的 queryString 鍵）queryString 參數，您可以使用URLSearchParams object 的delete方法，然后將參數 URL 更新入隊。

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

...

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

Answer 3

通過像這樣修改 function 解決了這個問題

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