javascript - 如何清除导致错误的搜索参数？

Question

假设我有一个页面，它根据 URL 中的参数呈现搜索结果，如下所示:

https://www.someurl.com/categories/somecategory?brands=brand1,brand2,brand3

这会导致页面仅显示品牌 1、品牌 2 和品牌 3 列表。我的侧面还有一个过滤器部分，如下所示:

[o] Brand 1
[ ] Brand 2
[o] Brand 3
[o] Brand 4

通过勾选项目，URL 将使用相应的参数进行更新。基本上，发生的情况是，我通过将 URL 参数作为参数传递来从 API 获取数据，然后服务器端端点接收这些数据以将匹配的数据返回给我。

现在的问题是，如果用户在 URL 中输入无效参数，例如

https://www.someurl.com/categories/somecategory?brands=somegibberish

服务器将返回一个错误(然后我将其显示在页面上)。

但是，当我勾选一个或多个过滤器时，由于它所做的只是将更多参数附加到 URL 中，因此服务器将始终返回错误，因为错误的参数仍在发送:

https://www.someurl.com/categories/somecategory?brands=somegibberish,brand1,brand2

为了解决这个问题，目前，当有人点击过滤器并且错误不为空时，我只需清除参数，如下所示:

componentDidUpdate(prevProps)
    if (prevProps.location.search !== location.search) {
        if (
            someobject.error &&
            !someobject.list.length
        ) {
            this.props.history.replace("categories", null);
            this.props.resetError();
        }
    }
}

这导致路径变成:

https://www.someurl.com/categories/

但是它的用户体验并不顺利，因为当我单击过滤器时(即使有错误)，我希望它执行过滤器而不是清除所有内容。意味着如果我以前有这个路径(有错误参数):

https://www.someurl.com/categories/somecategory?brands=somegibberish,brand1

..然后我在过滤器中单击brand2，路径应变为:

https://www.someurl.com/categories/somecategory?brands=brand1,brand2

但是我很困惑如何知道必须删除哪些参数。关于如何实现它有什么想法吗？服务器是否应该向我返回它无法识别的“id”，然后我进行过滤？目前，服务器返回给我的只是一条错误消息。

Answer 1

我同意 SrThompson 的评论，即不支持在应用程序中输入品牌，因为列表之外的任何内容都会导致错误。

公开一个包含可能品牌的界面，供用户进行选择。

话虽如此，以下是您可以如何过滤请求网址中的品牌。

将 URL 字符串转换为 URL 对象，并从其搜索参数中检索 “brands” 查询参数的值。

const url = new URL(
  "https://www.someurl.com/categories/somecategory?brands=somegibberish,brand1,brand2")

const brands = url.searchParams.get("brands")

过滤掉未包含在过滤列表中的品牌

const BRAND_FILTER = ['brand1', 'brand2']

const allowedBrands = brands.split(',')
                            .filter(brand => BRAND_FILTER.includes(brand))
                            .join(',')

更新品牌查询参数值

url.searchParams.set("brands", allowedBrands)

然后获取用于请求的 URL。

const requestURL = url.toString();