Javascript React useState/Useffect挂钩未正确返回信息

我是React和使用React挂钩的初学者。我有一个功能组件，需要在页面上显示一些信息。我接收并正确返回作业数组，我可以在其中迭代并成功显示其信息，但我也想接收另一个数组：

location

。此数组基于

作业

数组：我需要先接收

作业

，然后获取其位置id，然后接收信息并将其放入我的位置数组中，以便稍后在我的信息页面中使用。问题是，在我的表单中，当我想要在位置中迭代时，它没有在我的文本前面实际显示

位置.country

，而是在我的表单中重复JSX文本“location:”三次（我有3个作业对象）。我知道我必须在我的

useffect

中保存该位置数组，但它只接受2个参数。这是我的密码：

function fetchJSON (...args) {
  return fetch('/api/jobs/list-jobs', { headers: headers })
    .then(r => {
      if (!r.ok) {
        throw new Error('HTTP error ' + r.status)
      }
      return r.json()
    })
}

function useJobs () {
  const [jobs, setJobs] = React.useState([])
  const [locations, setLocations] = React.useState([])
  React.useEffect(() => {
    fetchJSON('/api/jobs/list-jobs', { headers: headers })
      .then(setJobs)
  }, [])
  React.useEffect(() => {
    for (const job of jobs) {
      fetchJSON(`/api/jobs/view-location/${job.location}/`, { headers: headers })
        .then(setLocations)// *** Need to handle #6 here
    }
  }, [jobs])

  return [jobs, locations]
}

export default function Jobs () {
  const classes = useStyles()
  const [jobs, locations] = useJobs()
  return (
 {jobs.map(job => (
   <>
  <div className={classes.root} key={job.id}>
<Row>
        <Col style={{ color: 'black' }}>Title:{job.title} </Col>
        <Col>Company Name:{job.company_name} </Col>
        <Col style={{ color: 'black' }}>Internal Code:{job.internal_code} </Col>
</Row>

{locations.map(location => (
 <Col key={location.id} style={{ color: 'black' }}>Location:{location.country}</Col>))
}

函数fetchJSON（…args）{ 返回fetch（'/api/jobs/list jobs'，{headers:headers}） .然后（r=>{ 如果（！r.ok）{ 抛出新错误（'HTTP错误'+r.status） } 返回r.json（） }) } 函数useJobs（）{ const[jobs，setJobs]=React.useState（[]） const[locations，setLocations]=React.useState（[]） React.useffect（（）=>{ fetchJSON（'/api/jobs/list jobs'，{headers:headers}） .然后（设置作业） }, []) React.useffect（（）=>{ for（const job of jobs）{ fetchJSON（`/api/jobs/view location/${job.location}/`，{headers:headers}） .然后（设置位置）/***需要在此处处理#6 } }，[工作]） 返回[工作、地点] } 导出默认函数作业（）{ 常量类=useStyles（） const[jobs，locations]=useJobs（） 返回( {jobs.map（job=>( 标题：{job.Title} 公司名称：{job.Company_Name} 内部代码：{job.Internal_Code} {locations.map（位置=>( 位置：{Location.country}） }

---

我有三个这样的作业对象，对于每一个，我想根据我在useEffect中收到的

作业。位置
位置数组打印正确的位置。
作业
数组的所有其他字段工作正常。如何正确实现位置部分？
您为ind获取位置数据当您使用
.then（setLocations）

您必须改为将位置存储为对象，并将作业id作为键

function useJobs () {
  const [jobs, setJobs] = React.useState([])
  const [locations, setLocations] = React.useState({})
  React.useEffect(() => {
    fetchJSON('/api/jobs/list-jobs', { headers: headers })
      .then(setJobs)
  }, [])
  React.useEffect(() => {
    for (const job of jobs) {
      fetchJSON(`/api/jobs/view-location/${job.location}/`, { headers: headers })
        .then((locations) => {
           setLocations(prev => ({...prev, [job.id]: locations}))
        })
    }
  }, [jobs])

  return [jobs, locations]
}

但是，更好的方法是使用Promise.all一次性更新所有位置

function useJobs () {
      const [jobs, setJobs] = React.useState([])
      const [locations, setLocations] = React.useState({})
      React.useEffect(() => {
        fetchJSON('/api/jobs/list-jobs', { headers: headers })
          .then(setJobs)
      }, [])
    `  React.useEffect(() => {
          async function fetchLocations() {
            const promises = [];
            for (const job of jobs) {
              promises.push(fetchJSON(`/api/jobs/view-location/${job.location}/`, { headers: headers })
                .then((locations) => {
                   return {[job.id]: locations }
                }))
            }
            const data = await Promise.all(promises);
            setLocations(prev => Object.assign({}, ...data))
           }
            fetchLocations();
          }, [jobs])
        return [jobs, locations]
    }

现在您必须注意，每个作业id对应的位置只是一个对象，而不是一个数组（根据聊天中的讨论），所以您不需要映射

{locations[job.id] && <Col key={locations[job.id].id} style={{ color: 'black' }}>Location:{locations[job.id].country}</Col>}

{locations[job.id]&&Location:{locations[job.id].country}
我使用它时承诺。所有系统，但现在我有一个错误：TypeError:locations[job.id]是未定义的，这是因为它将有一个未定义的时刻。请在它之前使用条件检查，如
{locations[job.id]&&locations[job.id].map（location=>（location:{location.country}）
现在又回到了我的主要错误！它打印文本位置：3次，但前面没有任何内容，比如位置。国家甚至没有。您是否在useJobs代码中记录了位置以查看您得到了什么？在另一篇文章中回答