v2.5.2
Giriş yap

React useEffect Sorunu

polev
530 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}
                />
              )}
violetbee
861 gün önce

Ç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