React中无法在KeyDown事件触发时调用useCallback封装的changeHandler函数

你的问题核心在于changeHandler是柯里化函数：调用changeHandler(!hasNext, page + 1)不会直接执行逻辑，而是返回一个待执行的函数。当前onKeyDown的回调里，你只调用了changeHandler拿到返回函数，但没有执行它，所以按下Enter时没有触发预期逻辑。

修复方案1：直接执行返回的函数 #

在Enter键的判断分支里，给changeHandler的调用结果加一层括号，执行返回的函数：

<span
  key="next"
  aria-label="Next"
  // ref={NextPageButtonRef}
  onClick={changeHandler(!hasNext, page + 1)}
  onKeyDown={(e) => {
    if (e.key === "Enter") {
      changeHandler(!hasNext, page + 1)(); // 执行返回的函数
    }
  }}
  tabIndex={0}
>
  <span>Next</span>
</span>

修复方案2：抽离重复逻辑（更简洁） #

把点击和回车要执行的函数抽成变量，避免重复调用changeHandler：

// 在组件内部定义
const handleNextPage = changeHandler(!hasNext, page + 1);

// 然后在JSX中使用
<span
  key="next"
  aria-label="Next"
  // ref={NextPageButtonRef}
  onClick={handleNextPage}
  onKeyDown={(e) => {
    if (e.key === "Enter") {
      handleNextPage();
    }
  }}
  tabIndex={0}
>
  <span>Next</span>
</span>

补充说明 #

直接绑定onKeyDown={changeHandler(!hasNext, page + 1)}能生效，是因为这里绑定的是changeHandler返回的函数——但这样会导致任何按键按下都会触发逻辑，不符合你只在Enter键触发的需求，所以必须通过onKeyDown的回调函数做按键判断后再执行。

内容的提问来源于stack exchange，提问作者Himanshu Bari