Javascript 数组不显示其中的所有项
我从基于一些ID的API收到一些信息。有3个作业对象,每个作业有一个标记数组,在每个数组中,有一些ID被发送到API以返回标记信息:Javascript 数组不显示其中的所有项,javascript,arrays,reactjs,react-hooks,Javascript,Arrays,Reactjs,React Hooks,我从基于一些ID的API收到一些信息。有3个作业对象,每个作业有一个标记数组,在每个数组中,有一些ID被发送到API以返回标记信息: function useJobs () { const [jobs, setJobs] = React.useState([]) const [locations, setLocations] = React.useState({}) const [departments, setDepartments] = React.useState({})
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>}
)}
....
}
从promise.all接收的数据将具有多个标记,用于同一jobId,因此您无法直接合并该对象,而是需要对其进行处理,以将其转换为objectId到标记数组映射
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}))
完成此操作后,您可以映射到标记并渲染它们
{tags[job.id] && tags[job.id].map(tag => <Col key={tags[job.id].id}>Tags:{tag.name} </Col>)}
{tags[job.id]&&tags[job.id].map(tag=>tags:{tag.name})
我收到此错误:未处理的拒绝(TypeError):acc未定义抱歉,我忘记了,返回acc代码>在reduce函数中。更新了postNow类型错误:标记[job.id]。映射不是函数
{tags[job.id] && tags[job.id].map(tag => <Col key={tags[job.id].id}>Tags:{tag.name} </Col>)}