Здравствуйте. У меня есть список карточек. При нажатии на эту кнопку Открыть передается ее id, срабатывает переход на другую страницу.

Далее уходит много get запросов на сервер для получения данных из разных таблиц бд.
useEffect(() => {
TechStore.getDataOperations(tech_id)
}, [])
getDataOperations(tech_id) {
let xhr = new XMLHttpRequest()
xhr.open("GET", `http://localhost:8000/api/adaptation/all`, false)
try {
xhr.send()
const dataAdaptation = JSON.parse(xhr.response)
this.dataOperations.forEach((operation) => {
dataAdaptation.forEach((adaptation) => {
if (adaptation["oper_id"] === operation["oper_id"]) {
operation["adaptation"].push(adaptation)
}
})
})
} catch (err) {
console.log(err)
}
xhr.open("GET", `http://localhost:8000/api/tool/all`, false)
try {
xhr.send()
const dataTool = JSON.parse(xhr.response)
this.dataOperations.forEach((operation) => {
dataTool.forEach((tool) => {
if (tool["oper_id"] === operation["oper_id"]) {
operation["tool"].push(tool)
}
})
})
} catch (err) {
console.log(err)
}
}
Как можно синхронно дождаться данных с сервера? Получается так, что эти данные уже используются, а их еще нет. Возникает ошибка.