#javascript #reactjs
Вопрос:
При нажатии кнопки «Отправить» я отправляю запрос 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
}
Комментарии:
1. вы получаете идентификатор и время ожидания не определены??
2. Нет. Я получаю неопределенное значение из функции getData. Потому что мне нужно ждать дольше, чем тайм-аут (я не могу изменить его вручную).
3. Где именно вы получаете свой
undefined
? ВsetSomeData(response)
,response === undefined
в чем ?4. Обратите внимание, что вы
getData
ничего не возвращаете (поэтому он возвращается неопределенным). Ноresponse
это устанавливается в вашемsomeData
объекте.5. Добавлена дополнительная информация для публикации
Ответ №1:
fetch вернет обещания, которые вы могли бы использовать затем для получения данных.
const onSubmit = async (data) => {
fetch(url, data)
.then(res => return res.json())
.then(res => getData(res.id))
}