React UseState Yenileme Sonrası Fetch

polev 463 gün önce

208 defa görüntülendi

  const ProductListGet = (filter = null) => {
        const outputFilter = {
                ...filterState,
                pageLimit: pageLimit,
        }
        const options = {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "Authorization": Token
                },
                body: JSON.stringify(filter != null ? outputFilter : {
                    pageLimit: pageLimit,
                })
         };
  }
  
  const filterActive = (values) => {
        setFilterState(values)
        ProductListGet(true)
  }

Filtreleme gönderildiğinde (FilterActive) state güncellenmesine rağmen bir önceki state durumunu göndermekte güncellenmiş halini ne denediysem olmadı.

Çözüm yolu nedir?

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

463 gün önce

Tekrar dediğim gibi state güncellenmiyorsa ve güncellemeye çalıştığın bir data obje ise bunu direkt olarak vermemelisin. Yeni bir obje olarak verip set etmelisin.

setFilterState({...values})

Böyle çalışacaktır diye düşünüyorum. Eğer farklı bir yol izlemek istersen useEffect ile state'ın değişip değişmediğini debuglayabilirsin

#012087

polev

463 gün önce

Açıklaman için teşekkür ederim ancak state eşzamansız şekilde güncelleniyor bunu kontrol edebiliyorum ama state güncellemesi sonrası kontrol ediyorum güncellenmiş evet daha sonra fetch fonksiyonunu çağırdığımda filter state bir öncekini güncellenmemişi göndermekte

#012082

devepdogukan

463 gün önce

Burdaki ilk hatan şu ; Javascript bir objeyi veya array'i (non-primitive) değeriyle değil ram'deki referans'ı ile kontrol eder.
Yani basit ile anlatmak gerekirse

console.log({} === {}) //false 
console.log('esit' === 'esit') //true

Bu durum state'i güncellerken sık karşılaşacağın bir durumdur. React state'ini güncellerken primitive değerlerde (string,number) direkt olarak değerine bakar. 1 !== 1 mi değil mi değilse renderla
Non-primitive değerlerde ise yukarıda bahsettiğim olay ile karşılaşıyor. Bu durumda değişken ne ise yeniden tanımlayıp referans'ının değiştiğini react'a bildirmen gerekli ki değiştiğini anlasın ve renderlasın.

setFilterState({...values})

Yukarıda yeni bir obje oluşturduk ve değerlerini values'in değerleriyle doldurduk. Artık react filterState ' in değiştiğini biliyor çünkü yeni bir referans ile tanımlandı.

#012081