Why might this code produce unexpected results?
4 phương ánCó giải thích
function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
setCount(count + 1);
};
return <button onClick={handleClick}>{count}</button>;
}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: "Both setCount(count + 1) calls use the same snapshot of count". Mỗi lần render, component Counter nhận một giá trị count cố định như ảnh chụp (snapshot); hàm handleClick được tạo trong lần render đó nên đóng gói (closure) đúng giá trị ấy. Khi count đang là 0, cả hai lời gọi đều tính 0 + 1 và cùng xếp vào hàng đợi yêu cầu đặt state thành 1, nên sau lần render kế tiếp nút hiện 1 chứ không phải 2 như người viết mong đợi; muốn cộng hai lần phải dùng hàm cập nhật dạng setCount(c => c + 1) để mỗi lần nhận giá trị mới nhất. "Because setCount is called twice, it resets state" sai vì không có gì bị đặt lại về 0, state chỉ lên 1. "Because setCount merges the updates automatically" sai vì React gom (batch) nhiều lần cập nhật vào một lần render nhưng không cộng dồn giá trị; trộn object là hành vi của this.setState trong class component. "It's invalid to call setCount twice" sai vì gọi hàm đặt state nhiều lần trong một sự kiện là hoàn toàn hợp lệ.
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