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}
/>
)}
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (5)
Galiba hallettim sorunu.
const [loading, setLoading] = useState(true);
const [rootAll, setRootAll] = useState([]);
const [chartOptions, setChartOpitons] = useState();
const [chartData, setChartData] = useState([]);
useEffect(() => {
const fetchData = async () => {
await fetch("https://localhost/api/root/all/static")
.then((response) => response.json())
.then((response) => {
setRootAll(response);
setLoading(false);
});
};
fetchData();
}, []);
useEffect(() => {
rootAll &&
setChartOpitons({
plugins: {
title: {
display: true,
},
legend: {
display: false,
},
},
responsive: true,
interaction: {
mode: "index",
intersect: false,
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
},
},
});
}, []);
const labels = [
"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",
];
useEffect(() => {
rootAll &&
setChartData({
labels,
datasets: [
{
label: "Satış Miktarı",
data: [
rootAll.hoursGraphic && rootAll.hoursGraphic["01:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["02:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["03:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["04:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["05:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["06:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["07:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["08:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["09:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["10:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["11:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["12:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["13:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["14:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["15:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["16:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["17:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["18:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["19:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["20:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["21:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["22:00"],
rootAll.hoursGraphic && rootAll.hoursGraphic["23:00"],
],
backgroundColor: "rgb(255, 99, 132)",
},
],
});
return () => {};
}, [rootAll.hoursGraphic]);
if (loading) {
return <div> Loading ... </div>;
}
useEffectin çıkış dependency state.hoursGraphic'i dinlemesini söylediğimde loadinge bile gerek kalmadı küçük bir kaçış noktası :)
return () => {};
}, [rootAll.hoursGraphic]);
N: Bu kodun daha temizi yazılabilir mi?
Ç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