Önemli: Diğer yazılarımla direkt bağlantılı bir yazıdır. İlk olarak bu yazıdan okumaya başladıysanız, eğitim serisine kısaca bir göz atmanızı tavsiye ederim.
Merhabalar.
Bir önceki yazımda birden fazla state kullanımını görmüştük.
Ancak yaptığımız işlemlerde her state’i tek tek tanımlamıştık. 100 tane takip edilecek state olsaydı, tek tek hepsini yazmak biraz bizi yorabilirdi. Kod tekrarı kodun bakımını ve okunurluğunu çok zorlaştırırdı.
Bunun için tek bir state objesi tanımlayıp içinde durumunu takip edeceğimiz değişkenleri tanımlasak ve sadece ilgili olanları güncellenmesini sağlasak çok iyi olurdu.
Bunu Calculator uygulamamızda yapacağız.
Kodlarımızı aşağıdaki gibi güncelleyelim.
Calculator.jsx’deki aşağıdaki kodları;
const [result, setResult] = useState(0);
const [count, setCount] = useState(0);
Aşağıdaki kodlarla değiştirelim.
const [allState, setAllState] = useState({
result: 0,
count: 0
});
Böylece artık değişkenlerimizin durumlarını tek bir obje üzerinden takip edeceğiz.
Tabi bunu böyle güncelledikten sonra çağrıldıkları yerleri şöyle güncelleriz.
<div className="result">
<h1 id="result">{allState.result}</h1>
<span>İşlem Adeti: {allState.count}</span>
</div>
Sıra geldi bu state’in güncellenmesine.
Sadece result’ı güncellemek istediğimde şunu yaparız, objenin içindeki önceki değerleri aynen alırız. Bunu daha önce gördüğümüz spread kavramıyla yapıyoruz. Yani objenin kendisini alıp önüne …(üç nokta) koyduğumuzda gerçekleştirebiliyorduk. Daha sonra güncelleyeceğimiz değişkenin yeni değerini veriyoruz.
setAllState({
...allState,
result: result
})
Bir de aynısından count için yapalım.
setAllState({
...allState,
count: allState.count + 1,
})
Bu şekilde statelerimizi güncellemiş olduk.
Tabii iki state aynı yerde ve artarda değiştirildiği için tek seferde bu işi çözebiliriz.
setAllState({
...allState,
result: result,
count: allState.count + 1,
})
Tekrar çıktımız kontrol ettiğimizde istediğimiz sonuçları hala alıyor olmalıyız.
Spread ile bu şekilde statelerimizi kolaylıkla güncelleyebiliriz.
Bir sonraki yazımda görüşmek üzere.
Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…
Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…
Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…
Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…
Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…
9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…