API'dan veri çekiyorum ancak ilk başta veri boş geliyor daha sonra veri geliyor

mlhslckr 634 gün önce

312 defa görüntülendi

React redux kullanarak api'dan veri çekiyorum ancak ilk başta veri boş geliyor daha sonra veri geliyor nasıl düzeltebilirim ?
https://www.hizliresim.com/aatjqna

//DonemSlice.js

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";

const initialState = {
  donem: [],
};

export const getDonem = createAsyncThunk("getDonem", async () => {
  const { data } = await axios.get("https://localhost:44381/api/Donems/getall");
  return data;
});

export const donemSlice = createSlice({
  name: "donem",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(getDonem.fulfilled, (state, action) => {
      state.donem = action.payload;
    });
  },
});

export default donemSlice.reducer;


import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getDonem } from "../stores/DonemSlice";

const Donem = () => {
  const dispatch = useDispatch();
  const { donem } = useSelector((state) => state.donem);

  useEffect(() => {
    dispatch(getDonem());
  }, []);

  console.log(donem);

  return (
    <div className="input">
      
    </div>
  );
};

export default Donem;

react

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (3)

devepdogukan

633 gün önce

Dönen cevabına tam bakamamışım kusura bakma response'un direkt dizi olarak değilmiş.

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getDonem } from "../stores/DonemSlice";

const Donem = () => {
  const dispatch = useDispatch();
  const { donem } = useSelector((state) => state.donem);

  useEffect(() => {
    dispatch(getDonem());
  }, []);

  console.log(donem);

  return (
    <div className="input">
      {donem?.data?.length > 0 ? (<div>Data var</div>) : (<div>Yükleniyor..</div>)}
    </div>
  );
};

export default Donem;

#012236

mlhslckr

634 gün önce

Cevap için çok teşekkür ederim ancak veri gelmiyor yükleniyor yazısı kalıyor

#012235

devepdogukan

634 gün önce

Bu bir hata değildir. Hatta olması gereken bir durum :)
Donem component'i dom'a yerleştiğinde state'ini güncelliyorsun.
State'in getDonem'i çağırmadan önce donem değişkeni verdiğin ilk initialState değerine sahip olur. Api'den cevap dönüp state'ini güncellediği zaman App'i render edip değişkenin değerini günceller

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getDonem } from "../stores/DonemSlice";

const Donem = () => {
  const dispatch = useDispatch();
  const { donem } = useSelector((state) => state.donem);

  useEffect(() => {
    dispatch(getDonem());
  }, []);

  console.log(donem);

  return (
    <div className="input">
      {donem.length > 0 ? (<div>Data var</div>) : (<div>Yükleniyor..</div>)}
    </div>
  );
};

export default Donem;

#012232