Javascript 按下退出按钮后，如何在React中运行功能？

该组件的整体思想是，第一次按下Escape键时，状态中的值

confirm

变为

true

，以验证用户是否确实想要执行

secPress（）

函数，并在5秒内再次按下Escape键运行

secPress（）

函数

不幸的是，组件中的

secPress（）

函数从未运行

如何让功能在第二次按键后运行

import React，{useState，useffect，useCallback}来自“React”；
导出功能useKeypress（按键，动作）{
useffect（（）=>{
函数onKeyup（e）{
if（e.key==key）action（）；
}
window.addEventListener（“keyup”，onKeyup）；
return（）=>window.removeEventListener（“keyup”，onKeyup）；
}, []);
}
常量应用=（）=>{
const[confirm，setConfirm]=使用状态（false）；
//此函数从不运行
常数secPress=（）=>{
控制台日志（“按下双转义”）；
};
const_confirm=useCallback（（）=>{
setConfirm（（prev）=>！prev）；
控制台日志（确认）；//{
const d=setTimeout（（）=>{
setConfirm（false）；
}, 5000);
return（）=>{
清除超时（d）；
};
}，[确认]；
返回{确认？“真”：“假”}；
};
导出默认应用程序；

---

React version:17.0.2

在您的例子中，这是因为您正在将一个空的依赖项数组传递给useKeypress函数中的useEffect；这样，事件侦听器始终具有相同的回调

最简单的更改是传递依赖项，例如：

import React，{useState，useffect，useCallback}来自“React”；
导出功能useKeypress（按键、操作、deps）{
useffect（（）=>{
函数onKeyup（e）{
if（e.key==key）action（）；
}
window.addEventListener（“keyup”，onKeyup）；
return（）=>window.removeEventListener（“keyup”，onKeyup）；
}，副署长）；
}
常量应用=（）=>{
const[confirm，setConfirm]=使用状态（false）；
//此函数从不运行
常数secPress=（）=>{
控制台日志（“按下双转义”）；
};
const_confirm=useCallback（（）=>{
setConfirm（prev=>！prev）；
控制台日志（确认）；//{
const d=setTimeout（（）=>{
setConfirm（false）；
}, 5000);
return（）=>{
清除超时（d）；
};
}，[确认]；
返回{确认？“真”：“假”}；
};
导出默认应用程序；

前面的答案不正确，您不必在事件侦听器效果中添加[confirm]

工作示例：

1） 你没有以任何方式解释为什么我的答案在你看来是不正确的2）你意识到你完全改变了代码，对吗？它甚至不起作用，因为它阻碍了“成功”；这不是问题中要求的行为，也不是提供的代码中要求的行为。3）尝试在setStage调用后放置console.log，您将遇到相同的OP问题。

  const [stage, setStage] = useState("initial");

  const secPress = () => {
    console.log("Double escape pressed");
  };

  const keydown = (e) => {
    if (e.key === "Escape") {
      setStage((current) => (current === "initial" ? "confirm" : "success"));
    }
  };

  useEffect(() => {
    window.addEventListener("keydown", keydown);

    return () => window.removeEventListener("keydown", keydown);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (stage === "success") {
      secPress();
    }
    if (stage !== "confirm") {
      return;
    }

    const d = setTimeout(() => {
      setStage("initial");
    }, 2000);
    return () => {
      clearTimeout(d);
    };
  }, [stage]);