Question

我想搜索params并将params添加到URL，但是每次都得到空数组。

示例网址-http://localhost:3000/buildings?search_query=test&page=2

constructor(props) {
  super(props);
  const params: URLSearchParams = new URLSearchParams(this.props.location.search);
  console.log(params); //Getting empty object {}
}

Answer 1

尝试

 console.log(params.get("page"));

它应该返回“ 2”。 URLSearchParams在控制台中显示为空对象，并不显示所有值。它确实允许您调用get函数。

否则，请确保this.props.location.search确实具有有效的功能。

new URL("http://localhost:3000/buildings?search_query=test&page=2").search

例如返回有效值。

Answer 2

我猜您使用 react-router 并将 URL 查询字符串附加到 /buildings。所以 this.props.location.search 是空的。

history.push({
  pathname: '/buildings?search_query=test&page=2',
});

请在 search 属性中设置 URL 查询字符串。

history.push({
  pathname: '/buildings',
  search: '?search_query=test&page=2'
});

Answer 3

您可以尝试显示参数：

for (let param of params) {
  console.log(param);
}

这将在控制台中显示所有参数。另外，您应该查看此页面中的示例，我认为它们会为您提供帮助！

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

Answer 4

URLSearchParams是可迭代的，因此您也可以执行[...params]来获取键值对数组。

Answer 5

事实证明，当您在 chrome dev 控制台中执行此操作时，它会向控制台返回一个空对象，而不是显示具有多个键的对象的标准方式

params = new URLSearchParams(window.location.search)

当您注销 params 时，您会期望它显示一个带有键的对象，但它没有。为了在控制台中实际看到它们，您需要使用循环遍历它

for (let item of params) {
  console.log('item: ', item)
}

相当混乱，因为我期望它像普通对象一样工作

URLSearchParams返回空对象

5 个答案: