If I switch too fast in 5 seconds on mobile chrome, useEffect will not fetch data from openWeatherAPI.
But wait it for 5 second and reswitch page, it is ok to fetch and display.
My weather app by Next.js app route deploy on vercel has two pages “/”, “/week”.
I use getPosition() get lat and lon, fetchApi() get weather data, and <Link> to switch pages.
homePage(“/”)
"use client";
import { fetchApi } from "@/api/fetchApi";
import InfoBox from "@/components/InfoBox";
import RainChart from "@/components/RainChart";
import TempChart from "@/components/TempChart";
import { getPosition } from "@/utils/getPosition";
import { unixToDate } from "@/utils/unixToDate";
import { unixToTime } from "@/utils/unixToTime";
import { useEffect, useState } from "react";
export default function Home() {
const [date, setDate] = useState<string>("");
const [time, setTime] = useState<string>("");
const [desc, setDesc] = useState<string>("");
const [feel, setFeel] = useState<number>(0);
const [hourFeel, setHourFeel] = useState<number[]>([]);
const [hourRain, setHourRain] = useState<number[]>([]);
useEffect(() => {
getPosition()
.then((position) => {
fetchApi(position.coords.latitude, position.coords.longitude, "metric")
.then((data: any) => {
setTime(unixToTime(data.current.dt));
setDate(unixToDate(data.current.dt));
setDesc(data.current.weather[0].description);
setFeel(Math.round(data.current.feels_like));
const hourFeelData: number[] = [];
const hourRainData: number[] = [];
for (let i = 0; i < 24; i++) {
hourFeelData.push(Math.round(data.hourly[i].feels_like));
setHourFeel(hourFeelData);
hourRainData.push(Math.round(data.hourly[i].pop * 100));
setHourRain(hourRainData);
}
})
.catch((err) => {
console.error(err);
});
})
.catch((err) => {
console.log(err);
});
}, []);
return (
<main>
<div className="mt-5 flex justify-evenly">
<InfoBox date={date} time={time} content={desc} />
<InfoBox label="現在體感" content={`${feel}℃`} />
</div>
<TempChart data={hourFeel} />
<RainChart data={hourRain} />
</main>
);
}
weekPage(“/week”)
"use client";
import { fetchApi } from "@/api/fetchApi";
import { getPosition } from "@/utils/getPosition";
import { unixToDate } from "@/utils/unixToDate";
import { useEffect, useState } from "react";
import DaysDetails from "@/components/DaysDetails";
const WeekPage = () => {
const loop = [];
for (let i = 0; i < 8; i++) {
loop.push(i);
}
const [date, setDate] = useState<string[]>(["", "", "", "", "", "", "", ""]);
const [desc, setDesc] = useState<string[]>(["", "", "", "", "", "", "", ""]);
const [dayFeel, setDayFeel] = useState<number[]>([0, 0, 0, 0, 0, 0, 0, 0]);
const [eveFeel, setEveFeel] = useState<number[]>([0, 0, 0, 0, 0, 0, 0, 0]);
const [rain, setRain] = useState<number[]>([0, 0, 0, 0, 0, 0, 0, 0]);
useEffect(() => {
getPosition()
.then((position) => {
fetchApi(position.coords.latitude, position.coords.longitude, "metric")
.then((data: any) => {
const dateData: string[] = [];
const descData: string[] = [];
const rainData: number[] = [];
const eveFeelData: number[] = [];
const dayFeelData: number[] = [];
for (let i = 0; i < 8; i++) {
dateData.push(unixToDate(data.daily[i].dt));
setDate(dateData);
descData.push(data.daily[i].weather[0].description);
setDesc(descData);
dayFeelData.push(Math.round(data.daily[i].feels_like.day));
setDayFeel(dayFeelData);
eveFeelData.push(Math.round(data.daily[i].feels_like.eve));
setEveFeel(eveFeelData);
rainData.push(Math.round(data.daily[i].pop * 100));
setRain(rainData);
}
})
.catch((err) => {
console.error(err);
});
})
.catch((err) => {
console.log(err);
});
}, []);
return (
<div className="flex h-[43.75rem] flex-col items-center justify-evenly">
{loop.map((i) => (
<DaysDetails
key={i}
date={date[i]}
desc={desc[i]}
rain={`${rain[i]}%`}
dayFeel={`${dayFeel[i]}℃`}
eveFeel={`${eveFeel[i]}℃`}
/>
))}
</div>
);
};
export default WeekPage;
pageSwitch in Layout
"use client";
import Link from "next/link";
import { useState } from "react";
const PageSwitcher: React.FC = () => {
const [page, setPage] = useState("now");
return (
<div className="flex justify-center">
<Link
href="/"
onClick={() => setPage("now")}
className={`flex h-14 w-[11.5rem] items-center justify-center ${page === "now" ? "bg-slate-300" : "bg-inherit"}`}
>
NOW
</Link>
<Link
href="/week"
onClick={() => setPage("7days")}
className={`flex h-14 w-[11.5rem] items-center justify-center ${page === "7days" ? "bg-slate-300" : "bg-inherit"}`}
>
7 DAYS
</Link>
</div>
);
};
export default PageSwitcher;
I think the problem is useEffect dependencies([]), maybe <Link> to page not means the initial render?
I try to link my phone to desktop with USB debug to see real mobile chrome devTool Network page.
mobile devTool-Network page
And compare with desktop devTool-Network page.
desktop devTool-Network page
I just hope it normally fetch data on android like desktop.
Please give me some advice, thanks!
