将键值对传递给 React JS 中的 API？答案

【问题标题】：Pass the key value pair to an API in React JS?将键值对传递给 React JS 中的 API？
【发布时间】：2021-10-19 02:33:40
【问题描述】：

我有完美的后端 API，看起来像这样：

后端

https://myapi.com/search?text=car&key=model&vlaue=Mustang

此 api 也适用于 unlimited key-value 对。像这样：

https://myapi.com/search?text=car&key=model&vlaue=Mustang&key=wheel&value=4....unlimited

前端

arguments 包含数据，如下所示：

//arguments
[
  {model: "Mustang"}
]

也可以是：多达更多

//arguments
[
  {model: "Mustang"}
  {wheel: "6"}
]

代码

  const (arguments,SetArguments) = useState();

 useEffect(() => {
   console.log(arguments); //It return arguments.

//  arguments.forEach(item => console.log(item))

  let API = "https://myapi.com/search?text=car &key=model&vlaue=Mustang... "
  const res = await fetch(API);
  const {result} = await res.json();
}, [arguments]);

问题：

如何在 useEffect 中传递 key-value 对中的 arrays data 以从该 API 获取数据？

【问题讨论】：

data 和 arguments 数组包含什么？
这段代码有很多错误，这个问题几乎不可能回答——你能发布你实际使用的代码吗，因为它不会运行
@fullstack @StudioTime 我想映射arguments 以传递给API

标签： javascript reactjs api use-effect facet

【解决方案1】：

假设参数是：

[
    {model: "Mustang"},
    {wheel: "6"}
]

然后你可以遍历每个元素，将对象的键和值用'='组合，每个元素用'&'组合。这是一个例子：

let API = "https://myapi.com/search?"


const params = arguments.map(i => Object.entries(i).map(([k,v]) => `key=${k}&value=${v}`)).join('&')

let APIWithParams = API + params

【讨论】：

其实它直接返回key和value。像这样：model=mustang 但我想像 key=model&value=Mustang
那么你会想要这样的东西：const params = arguments.map(i => Object.entries(i).map(([k,v]) => `key=${k}&value=${v}`)).join('&') > "key=model&value=Mustang&key=wheel&value=6" 如果你的数组中有两个对象，你会产生带有重复键的搜索参数。正如其他答案所建议的那样，而不是拥有一组对象，也许有一个对象来存储您的参数。 {model: "Mustang", wheel: "6"} 而不是 ` [ {model: "Mustang"}, {wheel: "6"} ] `

【解决方案2】：

您必须将参数添加为查询参数。在您的链接中，您在 ? 后面有一些东西。这些是查询参数。所以你可以像这样传递参数：

`https://myapi.com/search?text=car &key=model&value=${argument}`

然而，似乎没有必要使用数组作为参数，而且它也使它变得更加复杂。我建议你有一个这样的参数对象：

const arguments = {
  model: “Mustang”,
  wheel: 6
}

然后这样做来获取：

`https://myapi.com/search?text=car &key=model&value=${arguments.model}`

否则你必须先映射数组，然后找到键为“model”等的对象……

【讨论】：

【解决方案3】：

根据您的要求，我已经编写了代码来生成键和值查询字符串。看看吧！

// return string containing key and value 
const generateQueryParams = (data, query) => {
  // iterate over each argument
  data.forEach((obj, index) => {
    // get key and value of each argument object 
    Object.keys(obj).forEach(key => {
      let value = obj[key]
      // check if current argument is last in array, if yes then don't append & at the end of string
      if (index === data.length - 1) {
        // append key and value in query string
        query += `key=${key}&value=${value}`
        return
      }
      // append key and value in query string
      query += `key=${key}&value=${value}&`
    })
  })
  return query
}

// this will contain key value pair of arguments to send in API params
let query = "https://myapi.com/search?text=car&"

// mock data for arguments
let arguments = [{
  model: 'Mustang'
}, {
  wheel: 6
}]

// get the result
const result = generateQueryParams(arguments, query)
console.log(result)

【讨论】：