Birden fazla state

Aynı bileşende birden çok useState kullanmayı öğrenirsin.

Birden fazla state

Bileşende birden çok state olabilir. Her biri için ayrı bir useState çağrısı yaparsın: const [name, setName] = useState("") ve const [age, setAge] = useState(0).

İlişkili değerleri tek bir nesnede toplayabilirsin: const [form, setForm] = useState({name: "", age: 0}). Bu durumda güncellerken spread kullanırsın: setForm(f => ({...f, name: "Ayşe"})).

İki yaklaşım da geçerlidir; ilişkiyi göz önünde tut.

Nesne state güncelleme

Nesne state'ini güncellerken doğrudan değiştirme: form.name = "Ayşe" yanlış. React bunu görmez.

Doğrusu spread ile yeni nesne üretmek: setForm(f => ({...f, name: "Ayşe"})). Eski alanları korur, yalnızca name'i değiştirir.

İleride useReducer ile nesne güncellemeyi daha düzenli göreceğiz; şimdilik spread bilmek yeter.

Uygulama Çift state

Aşağıdaki iskeleti tamamla. Profile bileşeni yaz; useState'i içe aktar. const [name, setName] = useState("Ayşe"); ve const [age, setAge] = useState(30); tanımla. <p>{name} - {age}</p> döndür. Dışa aktar.

Örnek çözümü göster

import { useState } from "react";

function Profile() {
  const [name, setName] = useState("Ayşe");
  const [age, setAge] = useState(30);
  return <p>{name} - {age}</p>;
}

export default Profile;

Kendini test et

Birden fazla state: kavramları eşleştir

name

İsim state
age

Yaş state
form

Nesne state
spread ...f

Nesne güncelleme
İlişkili name ve age değerlerini tutmanın temiz yolu hangisidir?
```
Object state updates with spread.
```
- İki ayrı useState
- tek nesne useState
- prop
- global değişken
Cevabı göster

tek nesne useState — İlişkili değerleri tek nesnede tutmak güncellemeyi kolaylaştırır.

Birden fazla state: eksik parçayı tamamla

setForm(f => ({ ...f, name: ____ }))

Cevabı göster

setForm(f => ({ ...f, name: "Ayşe" }))

Sıradaki ders: Özet - useState

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler