How can you avoid contradictions in state with this code?
4 phương ánCó giải thích
const [isOpen, setIsOpen] = useState(false);
const [buttonText, setButtonText] = useState(isOpen ? "se" : "Open");
function toggle() {
setIsOpen(!isOpen);
setButtonText(isOpen ? "Open" : "se");
}Các phương án trả lời
Chọn một phương ánLời giảiChọn phương án để mở
Đáp án đúng: "Remove buttonText from state and calculate it dynamically in the render method based on isOpen.". buttonText hoàn toàn suy ra được từ isOpen, nên giữ nó thành state riêng là hai nguồn sự thật cho cùng một thông tin. Lần theo toggle: setIsOpen(!isOpen) chưa đổi isOpen ngay, trong lần gọi này isOpen vẫn là giá trị cũ, nên setButtonText phải cố tình đảo điều kiện mới ra đúng chữ; chỉ cần sửa một chỗ mà quên chỗ kia, hay cập nhật isOpen từ nơi khác, là chữ trên nút lệch với trạng thái. Nguyên tắc của React là không lưu thứ tính được từ state khác: bỏ buttonText khỏi state và tính chữ của nút từ isOpen bằng toán tử ba ngôi ngay trong thân component. "The code above is fine as it is." sai vì đoạn mã chạy được nhưng dư state và dễ mâu thuẫn. "Keep both isOpen and buttonText in state but update them separately." chính là cách đang gây rủi ro lệch nhau. "Use useEffect to sync buttonText with isOpen." chạy được nhưng thêm một lần render thừa và một khoảnh khắc hai state lệch nhau; tài liệu React khuyên tránh effect chỉ để đồng bộ state suy diễn.
Cùng phần 6
Find the bug in the following React code: const [items, setItems] = useState([]); const addItem = () => { items.push('new'); setItems(items); };Có lời giảiCâu hỏiWhich is the correct way to consume context in a functional component using the "useContext" hook?Có lời giảiCâu hỏiIn the useEffect hook, how many milliseconds would you wait using setTimeout to perform a side effect after 2 seconds?Có lời giảiCâu hỏiCả 24 câu của chủ đề24 câu