React中使用自定义useKey Hook按下Enter键无法重置搜索输入框状态的问题排查

我正在尝试用React创建一个搜索输入组件，要求按下Enter键时将搜索查询重置为空字符串，但如果输入框当前处于聚焦状态则不执行重置操作。我用了一个自定义的useKey钩子来全局监听按键事件，但按下Enter时输入框并没有如预期重置。下面是我的代码设置：

自定义Hook: useKey #

这个钩子会监听特定按键的按下事件并触发回调：

import { useEffect } from "react";

export function useKey(key, action) {
  useEffect(() => {
    function callback(e) {
      if (e.code.toLowerCase() === key.toLowerCase()) {
        action();
      }
    }

    document.addEventListener("keydown", callback);

    return () => {
      document.removeEventListener("keydown", callback);
    };
  }, [key, action]);
}

搜索组件 #

这是我的搜索组件，它使用useKey钩子来重置查询状态并聚焦到输入框：

import { useRef } from "react";
import { useKey } from "./useKey";

export default function Search({ query, setQuery }) {
  const inputEl = useRef(null);

  useKey("Enter", function () {
    if (document.activeElement === inputEl.current) {
      // 如果输入框处于聚焦状态，什么都不做
      return;
    }

    // 重置查询并聚焦到输入框
    inputEl.current.focus();
    setQuery(""); 
  });

  return (
    <input
      type="text"
      placeholder="Search"
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      ref={inputEl}
    />
  );
}

父组件 #

这是管理查询状态的父组件：

import { useState } from "react";
import Search from "./Search";

export default function App() {
  const [query, setQuery] = useState("");

  return (
    <div>
      <Search query={query} setQuery={setQuery} />
      <p>Current search: {query}</p>
    </div>
  );
}

问题 #

当我在输入框中输入内容（比如"hello"）然后按下Enter键，我期望查询状态重置为空字符串""，显示的搜索查询更新为"Current search: "，但实际上查询状态没有重置，输入框仍然显示原来的文本。

我已经尝试过的方法 #

• 验证了setQuery函数确实被调用了（加了日志），而且传入的是空字符串""。
• 确认useKey钩子在按下Enter键时确实触发了回调函数。
• 检查过没有其他监听器或组件干扰。

尽管做了这些尝试，输入框的值还是没有如预期重置。

期望效果 #

• 按下Enter键时，查询状态应该重置为""。
• 输入框应该清空，"Current search"文本应该反映空状态。

额外说明 #

• 我使用的是React 18.3.1版本。
• useKey钩子也在其他组件中使用，但我认为它们不会干扰这个组件。

我的问题 #

是什么原因导致查询状态无法按预期重置？我该如何修复这个问题？

备注：内容来源于stack exchange，提问作者Lazare