Question

我想要一个可用于过滤我的结果的查询字符串。每当网址更改时，都会使用Redux调用一项操作，以使用URL中的给定过滤器加载我的数据。

示例网址如下：

/trainers?filter=city=Antwerp&firstName=Dax&lastName=Bosch&postalCode=2600&page=1

有了这个给定的URL，我的action.payload应该看起来像这样：

payload:
  filter: "city=Antwerp&firstName=Dax&lastName=Bosch&postalCode=2600"
  page: 1
  sortField: undefined
  sortOrder: undefined

这是我目前制作查询字符串的方式

  filterAdvancedSearch = (values: FormikValues) => {
    updateAdvancedSearchQueryString(this.props, {page: 1, filter: this.filterSearchResults(values)});
  };
  filterSearchResults = (values: any) => {
    let obj: any = {};
    Object.keys(values).forEach(
      key => values[key].length && (obj[key] = values[key])
    );
    return obj;
  };

我正在传递我的道具和对象，这些对象将用于生成查询字符串。 filterSearchResults()用于清除空值

我如何制作查询字符串并将其推入路线：

export function updateAdvancedSearchQueryString<T>(
  props: RouteComponentProps,
  newValues: any
) {
  props.history.push({
    pathname: props.location.pathname,
    search: queryString.stringify(newValues)
  });
}

我正在使用来自node.js的querystring模块，但是由于我的过滤器对象中有一个对象，因此我的url和action.payload如下所示：

/trainers?filter=%5Bobject%20Object%5D&page=1

payload:
  filter: "[object Object]"
  page: "1"
  sortField: undefined
  sortOrder: undefined

如何使用querystring模块使其在嵌套对象上工作，或者如何在不使用模块的情况下做到这一点？

Answer 1

尝试使用URLSearchParams类：

filterSearchResults = (values: any) => {
    let obj: any = {};
    Object.keys(values).forEach(
      key => values[key].length && (obj[key] = values[key])
    );
    return new URLSearchParams(obj).toString();
  };

生成查询字符串以用作API请求的url

1 个答案: