javascript - 在 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 应用程序中，导入查询字符串(您不需要添加依赖项，因为它是 Node.js 的内置模块)

import querystring from 'querystring'

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