Çoklu state

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.

Örnek çözümü göster

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;

Kendini test et

İki state'i nasıl yönetirsin?
- State kullanılamaz
- Tek useState ile olmaz
- Yalnızca bir state tutulur
- İki ayrı useState çağrısı ile
Cevabı göster

State kullanılamaz — her bağımsız değer için ayrı useState yazılır.

İkinci state'i ekle

import { useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const [____, setEmail] = useState('');
}

Cevabı göster

import { useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
}

Çoklu state eşleştirmesi

name

Ad state'i
setName

Ad setter'ı
email

E-posta state'i
setEmail

E-posta setter'ı

Sıradaki ders: Obj state

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler