Çoklu state
- React Native kursu
- Başlangıç
- Ders 74/116
- 5 dk
Birden çok state değişkeni öğrenirsin.
Birden çok state
Bir bileşende birden çok state olabilir. Her bağımsız değer için ayrı bir useState çağrısı yaparsın. Örneğin bir formda ad ve e-posta için iki ayrı state.
Örnek: const [name, setName] = useState(''); ve const [email, setEmail] = useState('');. Birini güncellemek diğerini etkilemez; her biri bağımsız yeniden render tetikler.
Birden çok state iyi organize eder; ilgili değerleri bir nesnede toplamak da bir seçenektir. Bunu Obje state dersinde göreceğiz. Şimdilik bağımsız değişkenler için ayrı useState'i öğreneceğiz.
State'ler bağımsızdır
Birden çok state'in her biri bağımsızdır. Birini güncellemek diğerini etkilemez. Örneğin setName('Ayşe') çağrısı yalnızca name'i değiştirir; email aynı kalır.
Yine de her ikisi de aynı bileşende olduğu için, biri değişince bileşen yeniden render edilir ve her ikisi de güncel değerle görünür. Bu, senkron görüntü sağlar.
Eğer iki değer her zaman birlikte değişiyorsa, bunları tek bir nesnede toplamak daha temiz olabilir. Aksi halde ayrı tutmak okunabilirliği artırır.
Uygulama Ad ve e-posta formu
Bir App bileşeni yaz. name ve email için iki ayrı useState('') tanımla. İki <Text> ile değerleri göster. App fonksiyonunu dışa aktar.
Başlangıç kodu
import { useState } from 'react';
import { Text } from 'react-native';
// formu buraya yazÖrnek çözüm
function App() {
const [name, setName] = useState('Ayşe');
const [email, setEmail] = useState('ayse@example.com');
return (
<>
<Text>{name}</Text>
<Text>{email}</Text>
</>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 İki state'i nasıl yönetirsin?
- State kullanılamaz Doğru cevap
- Tek useState ile olmaz
- Yalnızca bir state tutulur
- İki ayrı useState çağrısı ile
Açıklama: her bağımsız değer için ayrı useState yazılır.
2 İkinci state'i ekle
import { useState } from 'react';
function App() {
const [name, setName] = useState('');
const [____, setEmail] = useState('');
}import { useState } from 'react';
function App() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
}Açıklama: email ikinci state değeridir.
3 Çoklu state eşleştirmesi
| Kavram | Anlamı |
|---|---|
name |
Ad state'i |
setName |
Ad setter'ı |
email |
E-posta state'i |
setEmail |
E-posta setter'ı |