React UseState Yenileme Sonrası Fetch
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?
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ı.