Birden fazla state
- React kursu
- Başlangıç
- Ders 43/84
- 4 dk
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.
Başlangıç kodu
import { useState } from "react";
// Profile bileşenini buraya tanımlaÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Birden fazla state: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
name |
İsim state |
age |
Yaş state |
form |
Nesne state |
spread ...f |
Nesne güncelleme |
2 İlişkili name ve age değerlerini tutmanın temiz yolu hangisidir?
Object state updates with spread.- İki ayrı useState
- tek nesne useState Doğru cevap
- prop
- global değişken
Açıklama: İlişkili değerleri tek nesnede tutmak güncellemeyi kolaylaştırır.
3 Birden fazla state: eksik parçayı tamamla
setForm(f => ({ ...f, name: ____ }))setForm(f => ({ ...f, name: "Ayşe" }))Açıklama: Nesnenin name alanını güncelledin.