State Independen

Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 26 dari 42.

Perlu mengingat dua hal? Panggil useState dua kali. Setiap pemanggilan membuat bagian state yang sepenuhnya independen:

const [cats, setCats] = useState(0);
const [dogs, setDogs] = useState(0);

Memperbarui cats merender ulang komponen, tetapi dogs tetap mempertahankan nilainya tanpa berubah. Setiap state memiliki setter sendiri, dan tertukar antara keduanya adalah bug yang paling umum bagi pemula: setCats(dogs + 1) berhasil dikompilasi, tetapi tetap salah.

Tantangan

Sedang

Jalankan papan penerimaan tempat penampungan: dua penghitung yang tidak saling mengganggu.

Tambahkan dua state, cats dan dogs, keduanya dimulai dari 0.
Tampilkan keduanya di id="cats" dan id="dogs".
Tombol id="add-cat" menambahkan satu kucing; id="add-dog" menambahkan satu anjing.

Coba sendiri

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>