Obj state
- React Native kursu
- Başlangıç
- Ders 75/116
- 5 dk
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.
Başlangıç kodu
import { useState } from 'react';
import { Text } from 'react-native';
// nesne state'li formu buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Spread ile güncelle
import { useState } from 'react';
function App() {
const [form, setForm] = useState({ name: '', email: '' });
const updateName = (text) => {
setForm({ ____, name: text });
};
}import { useState } from 'react';
function App() {
const [form, setForm] = useState({ name: '', email: '' });
const updateName = (text) => {
setForm({ ...form, name: text });
};
}Açıklama: ...form eski alanları kopyalar.
2 Nesne state adımları
| Kavram | Anlamı |
|---|---|
useState({...}) |
Başlangıç nesnesi |
...form |
Eski alanları kopyalar |
name: text |
Yeni alan değeri |
yeni referans |
Render'ı tetikler |
3 Nesne state'inde hangi hata yaygın?
- useState'i çağırmamak
- Spread kullanmadan alan güncellemek Doğru cevap
- Setter'a isim vermemek
- State'i sayı tutmak
Açıklama: spread'siz atama diğer alanları yok eder.