数组不会显示其中的所有项目React JavaScript [英] Array doesnt display all of the items inside it React JavaScript

问题描述

我从基于某些ID的API接收了一些信息.有3个作业对象，每个作业都有一个标签数组，并且在每个数组中，都有一些ID发送到API以返回标签信息:

I receive some info from an API based on some ids. there are 3 job objects, each job has an array of tags and in each array, there are some ids that get sent to the API to return the tag info:

function useJobs () {
  const [jobs, setJobs] = React.useState([])
  const [locations, setLocations] = React.useState({})
  const [departments, setDepartments] = React.useState({})
  const [tags, setTags] = React.useState({})

  React.useEffect(() => {
    async function fetchTags () {
      const tPromises = []
      for (const job of jobs) {
        for (const tag of job.tags) {
          console.log(tag)
          tPromises.push(fetchJSON(`/api/jobs/view-tag/${tag}`, { 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]
}
export default function Jobs () {
 const [jobs, locations, departments, tags] = useJobs()
.....
{jobs.map(job => (
   {tags[job.id] && <Col key={tags[job.id].id}>Tags:{tags[job.id].name} </Col>}
)}
....
}

问题是每个作业的每个标签阵列中仅打印一项.例如，如果数组为 [1,2,3] ，然后转换为 [Css，Js，HTML] ，则仅显示Css.我该如何解决这个问题?

the problem is that only one item from each array of tags for each job is printed. for example if the array is [1,2,3] and then gets converted to [Css,Js,HTML], only Css is shown. How can I fix this issue?

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

  return [jobs, locations, departments, tags]
}

推荐答案

从promise.all接收到的数据将具有针对同一jobId的多个标记，因此您无法直接合并该对象，而需要对其进行处理以对其进行转换到一个objectId到标签数组映射

The data that you receive from promise.all will have multiple tags for same jobId so you cannot directly merge that object, instead you need to process it to convert it to an objectId to tags array mapping

  const dData = await Promise.all(tPromises)
  const tags = dData.reduce((acc, item) => {
      const [key, value] = Object.entries(item)[0];
      if(acc[key]) {
         acc[key].push(value);
      } else {
         acc[key] = [value];
      }
      return acc;
  }, {})
  setTags(prev => ({...prev, ...tags}))

一旦执行此操作，便可以映射标签并呈现它们

once you do that you can map over the tags and render them

   {tags[job.id] && tags[job.id].map(tag => <Col key={tags[job.id].id}>Tags:{tag.name} </Col>)}

这篇关于数组不会显示其中的所有项目React JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！