在反应中，如何将对象数组作为查询字符串传递给端点 url？答案

【问题标题】：In react, how to pass an array of object as a query string to the endpoint url?在反应中，如何将对象数组作为查询字符串传递给端点 url？
【发布时间】：2021-09-02 14:34:45
【问题描述】：

我正在开发一个反应应用程序，需要动态构建查询字符串并将其附加到 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("&"))

任何帮助将不胜感激。

【问题讨论】：

标签： javascript reactjs redux ecmascript-6

【解决方案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 应用中，导入查询字符串（你不需要添加依赖，因为它是 Node.js 的内置模块）

import querystring from 'querystring'

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

【讨论】：

工作就像一个魅力。非常感谢。