Блог

При нажатии кнопки «Отправить» я отправляю запрос POST с некоторыми данными на сервер, и в ответ я получаю объект с идентификатором и временем ожидания. Затем мне нужно установить тайм-аут и, когда придет время, отправить запрос на получение данных. Проблема в том, что данные еще не готовы, и я не определяюсь, и мое приложение React выходит из строя.

Мне сказали , что тайм-аут должен быть только с первого запроса (я имею в виду, что я не могу его увеличить или сделать что-то вроде этого: timeout * 2 , мне нужно использовать тайм-аут только с первого запроса). Как я могу это сделать? Я думаю, что это можно как-то сделать с помощью цикла While …но я недостаточно умен, чтобы написать этот код. Пожалуйста, помогите

 const [someData, setSomeData] = useState({}) // here comes undefined and app crashes because this object renders in DOM

const getData = async (id) => {
  const response = await fetch(`$BASE_URL/${id}`)
  setSomeData(response)
}

const onSubmit = async (data) => {
  const { id, timeout } = await fetch(url, data)
  
  setTimeOut(() => {
    getData(id) // data is not ready and I get undefined
  }, timeout) // its around 1000ms and I can't change it mannually
  
}
 

Если я сделаю это, то все будет хорошо

 const getData = async (id) => {
  const response = await fetch(`$BASE_URL/${id}`)
  setSomeData(response)
}

const onSubmit = async (data) => {
  const { id, timeout } = await fetch(url, data)
  
  setTimeOut(() => {
    getData(id) 
  }, 6000) // if I manually specify timeout to 6000
  
}
 

fetch вернет обещания, которые вы могли бы использовать затем для получения данных.

 const onSubmit = async (data) => {
    fetch(url, data)
      .then(res => return res.json())
      .then(res => getData(res.id))
}