React useEffect Sorunu
Merhaba, api tarafından gelen verilerle grafik oluşturmaya çalışıyorum ancak api tamamlandıktan ve state güncellendikten sonra grafik oluşmuyor.Kodu tekrar save ettiğimde sayfa yenilemeden grafik güncelleniyor bu neden olabilir?
const [rootAll, setRootAll] = useState([]);
const [state, setState] = useState([]);
useEffect(() => {
fetch("http://localhost.com/api/root/all/static")
.then((res) => res.json())
.then((result) => setRootAll(result));
}, []);
useEffect(() => {
setState({
options: {
chart: {
id: "apexchart",
},
xaxis: {
categories: [
"00:00",
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00",
"09:00",
"10:00",
"11:00",
"12:00",
"13:00",
"14:00",
"15:00",
"16:00",
"17:00",
"18:00",
"19:00",
"20:00",
"21:00",
"22:00",
"23:00",
],
},
},
series: [
{
type: "bar",
name: "Satış Miktarı",
data: [
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["01:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["02:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["03:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["04:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["05:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["06:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["07:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["08:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["09:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["10:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["11:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["12:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["13:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["14:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["15:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["16:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["17:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["18:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["19:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["20:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["21:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["22:00"] : 0,
rootAll.saleTotal > 0 ? rootAll.hoursGraphic["23:00"] : 0,
],
},
],
});
}, []);
/* Render */
{state.options && (
<ReactApexCharts
options={state.options}
series={state.series}
type="bar"
width={500}
height={320}
/>
)}
Çok tecrübeli değilim ancak fikrimi söyleyebilirim; kodu incelediğimde hata göremedim, muhtemelen problem async-await yapısı kullanmadığınız için. Veriler gelmeden render oluyor, loading screen ya da async-await yapısını kullanırsanız çözülür gibime geliyor.
Şu linkteki makale yardımcı olacaktır. https://hashnode.com/post/how-to-add-loader-or-spinner-using-react-hooks-while-fetching-data-from-apis-ckhv38mr902kdgms100vh3u86