#javascript #reactjs #async-await #react-query
#язык JavaScript #реагирует на #асинхронное ожидание #реагировать-запрос
Вопрос:
Я отображаю значок, на который пользователь может нажать, чтобы выйти из системы. Этот значок отображается при условии, что пользователь вошел в систему. Я не хочу отображать его, когда пользователь не вошел в систему. У меня есть эта функция в событии onClick, и всякий раз, когда функция запускается, пользователь выходит из системы на серверной части, но данные пользователя по-прежнему извлекаются сразу после этого. Как такое может быть? Я предполагаю, что либо моя функция async await написана неправильно, либо она слишком быстро делает запрос недействительным? Я хочу аннулировать запрос пользовательских данных, чтобы он повторно выполнялся и видел, что пользователь не вошел в систему, поэтому значок выхода больше не отображается.
const logoutUser = async () =gt; { setShowModal(false) try{ await axios.delete('/logout') console.log("LoggedOut:") history.push("/") queryClient.invalidateQueries('userData') }catch(error) { console.log(error.message) } } Комментарии:
1. Я должен добавить, что если я обновлю страницу, она обновится и увидит, что пользователь вышел из системы и больше не отображает значок.
2. Разве вы не можете просто переместить
history.push("/")«быть» после строки признания недействительным?3. @millhouse это ничего не меняет, пользователь может выйти из системы, находясь на главной странице. Я поместил это туда на всякий случай, если они находятся на странице только для пользователей.
Ответ №1:
судя по прикрепленному изображению, похоже, что запрос на удаление поступает и пользователь выходит из системы. Вы правильно await ответили на запрос, и это нормально. invalidateQueries также не «слишком быстро». Он просто пометит запрос как недопустимый и повторит его, если он активен (что, скорее всего, так и есть). Теперь вы снова переходите к серверной части, которая выдает 401. Я предполагаю, что у вас не включены повторные попытки, иначе вы бы увидели еще 3 запроса.
Теперь происходит то, что react-query никогда не будет выбрасывать кэшированные данные. Даже если у вас есть error , если вы уже получали данные раньше, ваше состояние будет:
status: 'error', error: "401 - Unauthorized" data: staleDataFromTheLastSuccessfulRequest Это устаревшие принципы повторной проверки, а также устаревшие принципы, на которых основана библиотека.
После выхода из системы вы, скорее всего, захотите:
queryClient.removeQueries('userData')это приведет к удалению данных из кэша, но не сообщит об этом наблюдателям. Если вы все еще визуализируете что-то на экране, оно будет там до следующего повторного рендеринга. Скорее всего, это не проблема при перенаправлении на экран выхода из системы. В качестве альтернативы вы можете:queryClient.resetQueries('userData')это приведет к возврату данных в исходное состояние (undefinedесли вы не соедините их сinitialData), а также сообщит активным наблюдателям, что может привести к повторной выборке. Скорее всего, это то, что вам нужно, если вы отображаете этот значок в компоненте, который всегда виден, например в заголовке.