所以我做了这个模态https://codesandbox.io/s/amazing-morning-ukxp2?file=/src/components/Modal.js
每当您按下 esc 键时，就应该关闭模态。每次按 esc 时，我都添加了一条消息以显示。
但是，如果您检查控制台，它每次都会以 2x 的倍数打印我的消息，因此过一会儿它会显示 100 次这样的消息
这是我指的功能
function keyPress(e) {
if (e.key === 'Escape' && showModal) {
setShowModal(false);
console.log('I pressed');
}
}
document.addEventListener('keydown', keyPress);
我尝试将其放入 useEffect 函数并将 showModal 添加为依赖项，但无法正常工作
当我只希望在模态打开时和按一次 esc 键时触发 keydown 事件侦听器时，如何防止 keydown 事件侦听器在控制台中显示这么多次？
似乎每次我重新打开模态时，它都会将 esc 键消息加倍。
您需要处理useEffect钩子内的事件侦听器（添加、删除）：
useEffect(() => {
document.addEventListener("keydown", keyPress);
return () => document.removeEventListener("keydown", keyPress);
});
这样，您将keyPress在每个生命周期中订阅函数。为了进一步改进它，您可以包装keyPress在 useCallback 钩子中（以记住新渲染中的函数）并将其添加为依赖项：
const keyPress = useCallback(
(e) => {
if (e.key === "Escape" && showModal) {
setShowModal(false);
console.log("I pressed");
}
},
[setShowModal, showModal]
);
useEffect(() => {
document.addEventListener("keydown", keyPress);
return () => document.removeEventListener("keydown", keyPress);
}, [keyPress]);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句