Question

每当我单击窗口时，我都试图在item处理程序中增加updateItem。它在屏幕上显示为已更新，但奇怪的是，0事件处理程序中仅出现初始值updateItem。

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>
  )
}

主要问题是什么？

谢谢。

Answer 1

我找到了原因。在事件处理程序中使用的任何值都从定义该值的闭包中获取其值。因此，它仅显示为其初始值。

解决方案是每当状态更改时再次订阅事件处理程序，像这样：

  React.useEffect(() => {
    window.addEventListener('click', updateItem);
    return () => {
      window.removeEventListener('click', updateItem);
    };
  }, [item]);

还有另一种使用ref的方法，因为它总是保留最新的值。

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

1 个答案: