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}
/>
)}
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?