react async получаю старые данные при сравнении
У меня не срабатывает не один из методов dataPlaces?.map((place: Place) => ... : ( не отображается этот кусочек кода)) Если приходит пустой ответ ([]) просто ничего не показывается. Я так понимаю это из-за async await, но я только учусь
вот исходники github
export default function PlaceList({
IdTelegramApp,
setPlaceId,
telegram_username,
}: PlaceListProps) {
const queryClient = useQueryClient()
const { data: TUserQuery } = useTUser(IdTelegramApp)
const { data: dataPlaces } = usePlacesQuery(IdTelegramApp)
const handleCreateTelegramUser = () => {
mutationTelegram.mutate({
telegram_user_id: IdTelegramApp!,
username: telegram_username ?? "",
})
// Делаем задержку и полностью перезапускаем страницу, т.к. я не нашел другого способа т.к. IdTelegramApp не обновляется
delay(10000)
window.location.reload()
}
const mutation = useMutation({
mutationFn: (id: number) => PlaceService.delete(id),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["places"] })
},
})
const mutationTelegram = useMutation({
mutationFn: (data: WebAppUser) => TUserService.create(data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["telegram", "places"] })
console.log("delay_befor")
delay(50000)
console.log("delay_after")
},
onError: () => {
delay(50000)
console.log("delay_5000")
},
})
async function plugForEmptyList() {
if (dataPlaces?.length == 0 || dataPlaces == undefined) {
return (
<>
<img src={"./Share-expenses_add_place.png"} className="px-6 py-1" />
<p className="p-3 mt-1 text-sm text-gray-500 dark:text-gray-300">
Разделите расходы в поездках и мероприятиях. Нажмите "add +"
Добавьте место для начало работы.
</p>
</>
)
}
return ""
}
return (
<>
{/* Если Id не определен, а если определен то смотрим есть ли такой пользователь в БД, если нет запускаем его создание */}
{TUserQuery?.length !== 0 || IdTelegramApp !== undefined ? (
<div className="px-4">
<ol className="relative border-s border-gray-200 dark:border-gray-700">
{dataPlaces?.length != 0 || dataPlaces != undefined ? (
dataPlaces?.map(
(place: Place) =>
(
<li className="mb-6 ms-4 pt-2" key={place.id}>
<div className="absolute w-3 h-3 bg-gray-200 rounded-full mt-1.5 -start-1.5 border border-white dark:border-gray-900 dark:bg-gray-700"></div>
<div className="mb-2 flex justify-between text-l font-semibold text-gray-900 dark:text-white">
<div>
<button onClick={() => setPlaceId(place.id!)}>
{place.name}
</button>
</div>
</div>
<div className="flex justify-between mb-2 text-sm font-normal text-gray-500 dark:text-gray-400">
<div>
{place.id && (
<a
href="#"
className="inline-block px-2 py-0.5 text-sm font-sm rounded-md bg-blue-200 dark:bg-violet-400 dark:text-gray-900"
onClick={() => mutation.mutate(place.id!)}
>
Удалить
</a>
)}{" "}
Ред.
</div>
</div>
</li>
) ?? (<div>не отображается этот кусочек кода</div>)
)
) : ( <div>не отображается этот кусочек кода</div>)}
</ol>
</div>
) : (
<>
{handleCreateTelegramUser()}
</>
)}
{plugForEmptyList}
</>
)
}