React Native
Obj state
Obje olarak state yönetimini öğrenirsin.
State olarak nesne
State'i bir nesne olarak tutmak, ilgili değerleri birlikte yönetmeyi kolaylaştırır. Örneğin bir form için const [form, setForm] = useState({'{ name: '', email: '' }'}).
Nesne state'i güncellerken dikkat: setForm({ name: 'Ayşe' }) yazarsan email kaybolur. Çünkü setter verdiğin nesneyi eskisiyle birleştirmez; tamamen değiştirir.
Bunu çözmek için yayma (spread) kullanılır: setForm({'{ ...form, name: 'Ayşe' }'}). Üç nokta eski alanları kopyalar, sonra yalnızca name'i değiştirir. Buna merge denir.
Nesne state'inde dikkat
Nesne state'inde en sık yapılan hata, spread kullanmadan alan güncellemektir. setForm({ name: 'Ayşe' }) yazmak email'i yok eder; ekranda e-posta kaybolur.
Doğru yöntem her zaman setForm({'{ ...form, name: 'Ayşe' }'}). Bu desen yeni bir nesne oluşturur; eski alanları kopyalar ve yalnızca belirtilen alanı değiştirir. React, nesne referansının değiştiğini görür ve yeniden render yapar.
Aynı durum dizi state için de geçerlidir: setItems({'{...items, newItem}'}) gibi. Referans değişmedikçe React güncellemeyi fark etmez.
Uygulama Nesne state'li form
Bir App bileşeni yaz. useState({'{ name: '', city: '' }'}) ile form tanımla. updateName fonksiyonu setForm({'{ ...form, name: text }'}) yapsın. name ve city'yi iki <Text> ile göster. App fonksiyonunu dışa aktar.
Örnek çözümü göster
function App() {
const [form, setForm] = useState({ name: 'Ayşe', city: 'İstanbul' });
const updateName = (text) => {
setForm({ ...form, name: text });
};
return (
<>
<Text>{form.name}</Text>
<Text>{form.city}</Text>
</>
);
}
export default App;
Kendini test et
-
Spread ile güncelle
import { useState } from 'react';
function App() {
const [form, setForm] = useState({ name: '', email: '' });
const updateName = (text) => {
setForm({ ____, name: text });
};
}
Cevabı göster
import { useState } from 'react';
function App() {
const [form, setForm] = useState({ name: '', email: '' });
const updateName = (text) => {
setForm({ ...form, name: text });
};
}
-
Nesne state adımları
- useState({...})
- Başlangıç nesnesi
- ...form
- Eski alanları kopyalar
- name: text
- Yeni alan değeri
- yeni referans
- Render'ı tetikler
-
Nesne state'inde hangi hata yaygın?
- useState'i çağırmamak
- Spread kullanmadan alan güncellemek
- Setter'a isim vermemek
- State'i sayı tutmak
Cevabı göster
Spread kullanmadan alan güncellemek — spread'siz atama diğer alanları yok eder.
Sıradaki ders: Özet - State
