在react中，如何将对象数组作为查询字符串传递到端点url

Question

我正在开发一个react应用程序，需要动态构建查询字符串并将其附加到url。原因是因为我有一个对所有链接都相同的基本端点。然而，对于某些链接，api需要2个参数，而对于一些链接，它只需要1个参数。根据您单击的链接，页面会显示不同的数据。

例如，我在页面上有以下4个链接。评论|查看所有序列|回顾|总结

• 注释链接：需要2个参数(dstrNr和rgsnId(
• 查看所有序列：只需要1个参数(dstrNr(
• 审查：只需要1个参数(dstrNr(
• 摘要：需要2个参数(dstrNr和rgsnId(

如果我定义了一个基本url，我如何使用相同的api操作并将参数列表作为对象数组附加到url？

我尝试了以下操作，将object数据作为参数传递，但它也将undefined对象键/值对发送到端点，这是我不想要的：

var str = [];
for (var data in obj)
if (obj.hasOwnProperty(data)) {
str.push(encodeURIComponent(data) + "=" + encodeURIComponent(obj[data]));
}
console.log("ENDPOINT" + str.join("&")) 

如有任何帮助，我们将不胜感激。

Answer 1

您可以使用querystring的stringify函数，而不是一个完全符合您要求的自定义函数。

querystring.stringify({ foo: 'bar', baz: ['qux', 'quux'], corge: '' });
// Returns 'foo=bar&baz=qux&baz=quux&corge='

https://nodejs.org/api/querystring.html#querystring_querystring_stringify_obj_sep_eq_options

在你的react应用程序中，导入querystring(你不需要添加依赖项，因为它是Node.js的内置模块(

import querystring from 'querystring'
const url = `http://myapp.com?${querystring.stringify(queryParamsObj)}`