我是 React 的初學者，使用 React 鉤子。我有一個函數組件，需要在頁面上顯示一些信息。我收到并正確返回 jobs 數組，我可以迭代它并成功顯示其信息，但希望也接收另一個數組：。此數組基于數組：我需要先接收，然后獲取其位置 ID，然后接收信息并將其放入我的位置數組中，以便稍后在我的信息頁面中使用。問題是，在我的表單中，當我想迭代位置時，它實際上顯示文本前面的位置，它在我的表單中重復JSX文本“Location：”三次（我有3個工作對象）。我知道我必須將該位置數組保存在我的中，但它只接受2個參數。這是我的代碼：locationjobsjobslocation.countryuseEffectfunction 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>))}我有3個這樣的工作對象，對于每個對象，我想根據我在useEffect中收到的位置數組打印正確的位置。數組的所有其他字段都正常工作。如何正確實現位置部分？job.locationjobs