React中函数onClick执行正常 onKeyPress触发时跳过if语句问题

• 同一套列表清空逻辑，绑定在按钮onClick事件上可以完全按预期运行，绑定在输入框onKeyPress事件（回车触发）时会直接跳过if判断块，最终表现为每次搜索的新结果追加在旧列表后，无法替换原有内容。

场景说明 #

现有食谱搜索输入框，用户输入关键词（例如"pizza"）后会调用接口拉取对应食谱列表并展示。
旧列表清空规则：如果当前已展示的所有食谱标题，都不包含输入框最新输入的搜索词，就清空旧列表，再加载新关键词对应的结果。例如之前搜"pizza"展示了披萨相关食谱，现在搜"burger"时，如果所有披萨食谱的标题都不包含"burger"，就先清空披萨列表，再加载展示汉堡相关食谱。

问题复现代码 #

列表匹配校验逻辑 #

以下代码生成布尔值数组，标记每个已展示的食谱标题是否包含当前查询词：

const recipeListHasQuery = recipectx.data.map((recipe: any) => {
  return recipe.title.toLowerCase().includes(query);
})

清空逻辑函数 #

clearView通过onClick调用时执行正常，onKeyPress触发时if块内逻辑不生效：

const clearView = () => {
  console.log('i log on enter')
  // 以下if块在回车触发时不会执行
  if (!recipeListHasQuery.includes(true)) {
    const recipeList = document.querySelector(".recipe__list") as HTMLElement;
    recipeList!.innerHTML = "";
  }
}

回车事件处理函数 #

onKeyPress触发时可以正常进入函数，但会跳过内部if判断：

const HandleInputOnKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
  if (event.key === "Enter") {
    HandleInputChange(event as any); // 这部分逻辑回车触发时正常运行
    // 直接调用clearView()：回车时能进入函数，但跳过if判断
    // 直接把if判断写在当前位置，依然不生效
    if (!recipeListHasQuery.includes(true)) { 
      const recipeList = document.querySelector(".recipe__list") as HTMLElement;
      recipeList!.innerHTML = "";
    }
  }
};

事件绑定代码 #

<form>
  <input onKeyPress={HandleInputOnKeyPress}></input>
  <button onClick={clearView}>
    Search
  </button>
</form>

根本原因 #

核心是React状态异步更新导致的闭包旧值问题：

1. 回车事件回调中调用的HandleInputChange，内部会更新输入框的query状态，但React的状态更新是异步批处理的，同一段同步回调里后续读取到的query、以及依赖query计算的recipeListHasQuery都是上一轮渲染的旧值。比如你输入"burger"按回车时，回调里读到的query还是上一次的搜索词"pizza"，计算出来的recipeListHasQuery全是true（旧的披萨列表当然包含"pizza"），if条件自然不成立，不会执行清空逻辑。
2. 点击按钮触发时，输入框会先触发失焦，React已经完成一轮状态更新同步了最新的query值，这时候计算的recipeListHasQuery是新值，判断逻辑就可以正常命中。
3. 额外问题：当前直接操作DOMinnerHTML清空列表的写法不符合React单向数据流规范，后续很容易出现状态和UI不一致的问题。

修复方案 #

1. 把清空判断逻辑从事件回调中挪出来，放到依赖query和食谱列表数据的useEffect中，保证每次判断用的都是最新的状态值，同时不要直接操作DOM，用状态驱动UI更新：

useEffect(() => {
  const recipeListHasQuery = recipectx.data.map((recipe: any) => {
    return recipe.title.toLowerCase().includes(query);
  })
  if (!recipeListHasQuery.includes(true)) {
    // 调用状态管理的方法清空列表，不要直接操作DOM
    recipectx.setData([])
  }
}, [query, recipectx.data])

2. 不要单独监听输入框的onKeyPress处理回车，把搜索逻辑统一绑定到form的onSubmit事件上，天然同时覆盖回车触发、按钮点击两种场景，避免事件时序问题：

<form onSubmit={(e) => {
  e.preventDefault()
  // 统一在这里处理搜索逻辑：先触发状态更新，useEffect会自动判断是否需要清空旧列表，再发新的搜索请求
  triggerSearch()
}}>
  <input value={query} onChange={(e) => setQuery(e.target.value)} />
  <button type="submit">Search</button>
</form>

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