Özet - State
- React Native kursu
- Başlangıç
- Ders 76/116
- 5 dk
useState, önceki state ve obje state'i birleştirerek bir form yazarsın.
Özet - State
Bu grupta state'in temelini derinleştirdin. useState değer ve setter döndürür; setter yeniden render tetikler. Fonksiyonel güncelleme ardışık değişikliklerde güvenliği sağlar.
Çoklu state bağımsız değerleri ayrı tutar; nesne state ilgili alanları birlikte yönetir ve spread ile güvenli biçimde güncellenir. Şimdi iki mini görevle bunları birleştireceksin: önce çoklu state'li bir sayaç, sonra nesne state'li bir form.
Uygulama Çoklu state'li sayaç
Bir App bileşeni yaz. count ve step için iki ayrı useState tanımla. step'in başlangıç değeri 2, count'un 0 olsun. Bir <TouchableOpacity>'nin onPress'inde setCount(count + step) çağır. <Text> ile count'u göster. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { useState } from 'react';
import { Text, TouchableOpacity } from 'react-native';
// çoklu state'li sayacı buraya yazÖrnek çözüm
function App() {
const [count, setCount] = useState(0);
const [step, setStep] = useState(2);
return (
<TouchableOpacity onPress={() => setCount(count + step)}>
<Text>{count}</Text>
</TouchableOpacity>
);
}
export default App;Uygulama Nesne state'li form
Bir App bileşeni yaz. useState({'{ name: '', city: '' }'}) ile form tanımla. updateCity fonksiyonu setForm({'{ ...form, city: 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 updateCity = (text) => {
setForm({ ...form, city: 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 Tüm state kavramlarını eşle
| Kavram | Anlamı |
|---|---|
useState |
State oluşturur |
setter |
State'i günceller |
prev => prev + 1 |
Fonksiyonel güncelleme |
...form |
Nesne state'inde yayma |
2 Nesne state'inde en güvenli yol?
- setForm({ ...form, name: text })
- setForm({ name: text })
- form.name = text Doğru cevap
- setForm()
Açıklama: spread eski alanları korur ve yalnızca birini değiştirir.