每当我点击窗口时,我都试图在updateItem
处理程序中增加item
。它在屏幕上显示为已更新,但奇怪的是,在updateItem
事件处理程序中只显示初始值0
。
const TodoApp = () => {
const [item, setItem] = React.useState(0);
const updateItem = () => {
console.log(item); // always prints 0
setItem((val) => val + 1);
};
React.useEffect(() => {
window.addEventListener('click', updateItem);
return () => {
window.removeEventListener('click', updateItem);
};
}, []);
return (
<div>
<h2>{item}</h2>
</div>
)
}
主要问题是什么?
谢谢。
我找到了自己的原因。事件处理程序中使用的任何值都会从定义它的闭包中获取其值。因此,它只显示为其初始值。
解决方案是每当状态改变时再次订阅事件处理程序,像这样:
React.useEffect(() => {
window.addEventListener('click', updateItem);
return () => {
window.removeEventListener('click', updateItem);
};
}, [item]);
还有另一种方法,使用ref,因为它总是保持最新的值。