拆分信息数组以正确发送请求和接收信息 React JavaScript

Question

我想使用一些 id 从 api 接收一些信息，然后保存信息以供以后使用：

function useJobs () {
 const [tags, setTags] = React.useState({})
  React.useEffect(() => {
    async function fetchTags () {
      const tPromises = []
      for (const job of jobs) {
        console.log(job.tags)
        tPromises.push(fetchJSON(`/api/jobs/view-tag/${job.tags}`, { headers: headers })
          .then((tags) => {
            return { [job.id]: tags }
          }))
      }
      const dData = await Promise.all(tPromises)
      console.log(dData)
      setTags(prev => Object.assign({}, ...dData))
    }
    fetchTags()
  }, [jobs])

  return [jobs, locations, departments, tags]
}

function useJobs () {
const [jobs, locations, departments, tags] = useJobs()
......
{tags[job.id] && <Col key={tags[job.id].id}>Tags:{tags[job.id].name} </Col>}

但由于job.tags 是一个数组而不是单个字符串，我无法正确发送我的请求，并且收到如下错误：

"GET /api/jobs/view-tag/10,12,13 HTTP/1.1" 404 7681

如何将job.tags 数组拆分为各个部分并为每个部分发送请求并接收它们的信息？

这是我的 job.tags 数组（我有 3 个作业对象，在数组内部，每个作业都需要发送标签 ID）

Answer 1

您需要遍历每个 job.tags 数组并在请求中发送单独的标签 ID

您也不需要循环内的then 块。 Promise.All 将在所有承诺都被推入tPromises 数组后解决承诺

for (const job of jobs) {
   for (const tagId of job.tag) {

       tPromises.push(fetchJSON(`/api/jobs/view-tag/${tagId}`, {headers: headers})

   }
}

const dData = await Promise.all(tPromises)
console.log(dData)

Answer 2

试试这个：

for (const job of jobs) {
  for (const tag of job.tag) {
    console.log(tag)
    tPromises.push(fetchJSON(`/api/jobs/view-tag/${tag}`, { headers: headers })
      .then((tags) => {
        return { [job.id]: tags }
    }))
  }
}