无法在事件处理程序中获取更新的状态值



每当我点击窗口时,我都试图在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,因为它总是保持最新的值。

相关内容

  • 没有找到相关文章

最新更新