响应:在更新状态时打印所有过去状态
响应:在更新状态时打印所有过去状态
提问于 2021-07-16 08:47:32
我对这段代码的工作很好奇。
这是一个简单的代码，我打算为1提高计数器并在控制台上打印。
但是当我点击这个按钮时，计数器就会增加，也会从0打印到我增加的所有数字。
你能解释一下为什么会这样吗？
import { useState } from "react";
function App() {
const [counter, setCounter] = useState(0);
const onClick = () => {
window.addEventListener("click", () => {
console.log(counter);
});
setCounter((counter) => counter + 1);
};
return (
<div className="App">
<button onClick={() => onClick()}>Add & Print!</button>
<div>{counter}</div>
</div>
);
}
export default App;回答 2
Stack Overflow用户
回答已采纳
发布于 2021-07-16 09:51:39
您将onClick事件添加到button标记中，在执行该函数时，将onClick事件添加到window中。因此，每当单击button标记时，addEventListener就会显示console.log。在代码中，显示console.log不需要addEventListener，因为button标记已经有onClick事件。
在<button onClick={() => onClick()}>Add & Print!</button>标记中，每当单击标记时都会执行onClick事件，
在下面，
window.addEventListener("click", () => {
console.log(counter);
});addEventListener添加事件。
因此，每当单击button标记时，都会执行addEventListener (添加事件)。
import { useState } from "react";
function App() {
const [counter, setCounter] = useState(0);
const onClick = () => {
// doesn't need window.addEventListener
// window.addEventListener("click", () => {
console.log(counter);
// });
setCounter((counter) => counter + 1);
};
return (
<div className="App">
<button onClick={() => onClick()}>Add & Print!</button>
<div>{counter}</div>
</div>
);
}
export default App;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68406153
复制相关文章
相似问题
腾讯云开发者
