Question

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

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

哪个结果页面上仅显示brand1，brand2和brand3列表。我在侧面也有一个过滤器部分，如下所示：

[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

要解决此问题，当前，当有人单击过滤器和error is not null时，我只需清除以下参数即可：

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字符串转换为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();

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

1 个答案: