Эта строка не возвращает jobs и locations:
return (jobs, locations)
Вместо этого она оценивает jobs, отбрасывает этот результат, оценивает locations и возвращает это значение.
Если вы хотели вернуть массив, содержащий jobs и locations, вы можете либо вернуть массив, содержащий их как записи:
return [jobs, locations];
, и использовать его так, а не делать два вызывает useJobs:
const [jobs, locations] = useJobs();
или возвращает объект, содержащий их в качестве свойств:
return {jobs, locations};
и используйте его так, опять же, вместо того, чтобы делать два вызова useJobs:
const {jobs, locations} = useJobs();
Есть еще пара вещей, которые выпрыгивают:
Как я уже упоминал в комментарии, ваш код становится жертвой ножного оружия. в fetch API: fetch отклоняет только ошибку сеть , но не ошибку HTTP; вы должны проверить это отдельно (обычно проверяя response.ok). Подробности в моем анеми c маленький блог .
useEffect принимает только до двух аргументов, а не трех. Здесь вы используете три:
React.useEffect(() => {
jobs.map(job => (
axios.get(`/api/jobs/view-location/${job.location}/`, { headers: headers })
.then(res => res.json())
.then(setLocations)
))
}, [jobs], [])
// −−−−−−^^^^−−−−−−−−−−−−−−−− remove
Кажется странным использовать fetch в одном месте, а axios в другом. Я предлагаю стандартизировать одно или другое. Если у вас нет веской причины для использования axios, я бы, вероятно, просто использовал оболочку для fetch, которая проверяет ошибки HTTP и отклоняет.
Я не использую axios, но Шубхам Хатри указывает на проблемы с его использованием в вашем коде.
Вы используете map как простой итератор для массива . Это никогда не подходит, map предназначен для создания нового массива из результатов обратного вызова map. Если вы не используете возвращаемое значение из map, используйте вместо него forEach (или for-of).
Вы выполняете вызов ajax на задание в al oop, но затем сохраняя результаты в locations. Это означает, что результаты каждого вызова в l oop перезаписывают все предыдущие результаты. Предположительно вы хотели что-то сделать с всеми результатами.
Взяв все вместе:
// A reusable JSON fetch wrapper that handles HTTP errors
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(() => {
// *** Don't use `map` as a simple iteration construct
for (const job of jobs) {
fetchJSON(`/api/jobs/view-location/${job.location}/`, { headers: headers })
.then(setLocations) // *** Need to handle #6 here
}
}, [jobs]) // *** No additional array here
return [jobs, locations]
}
export default function Jobs () {
const classes = useStyles()
const [jobs, locations] = useJobs() // *** Use jobs and locations here
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>))
}
... но это не Не справляюсь # 6.