Trạng thái độc lập

Thuộc phần Kiến thức cơ bản trong hành trình React của Coddy. Bài học 26 trên 42.

Cần ghi nhớ hai thứ? Hãy gọi useState hai lần. Mỗi lần gọi tạo ra một phần trạng thái hoàn toàn độc lập:

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

Cập nhật cats sẽ kết xuất lại component, nhưng dogs vẫn giữ nguyên giá trị. Mỗi trạng thái có hàm cập nhật riêng, và nhầm lẫn giữa chúng là lỗi phổ biến nhất ở người mới bắt đầu: setCats(dogs + 1) vẫn biên dịch bình thường nhưng kết quả không đúng.

Thử thách

Trung bình

Chạy bảng tiếp nhận của trạm cứu hộ: hai bộ đếm hoạt động độc lập.

Thêm hai state, cats và dogs, cả hai đều bắt đầu từ 0.
Hiển thị chúng trong id="cats" và id="dogs".
Nút id="add-cat" thêm một con mèo; id="add-dog" thêm một con chó.

Tự làm thử

<!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>