React useEffect Sorunu

polev 1004 gün önce

605 defa görüntülendi

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

react

polev

1004 gün önce

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?

#010684

Tüm Cevapları Göster (5)