先直接上场景

可以明显看到，在搜狗拼音输入法还没有完成输入的时候就已经触发搜索了，此时根据拼音内容(一些英文)去搜索，会搜索不到任何结果，导致 Table 内显示空信息。

这明显不是我们想要的效果，我们所希望的应该是在输入法完成搜索（按下空格或回车后）再去触发搜索框的搜索。

解决方案

onCompositionStart & onCompositionEnd

这两个事件确实第一次接触，放上 compositionstart event 在 MDN 的截图：

简单来说，搜狗拼音输入法就是图中所说的 IME(Input Method Editor)，当开启一段 composition session 的时候就会触发这个事件，至于什么是 composition session 呢~ 😝

知道存在这个 event 之后，一切也就豁然开朗了，我们可以维护一个 lock 变量，只有在 lock 为 false 的时候才触发搜索，并通过上述的两个事件来 set 这个 lock 变量~

（伪）代码

  <Input
    onChange={e => setInputVal(e.target.value)}
    onCompositionStart={() => setLock(true)}
    onCompositionEnd={() => setLock(false)}
  />

  useEffect(() => {
    // 输入拼音的情况下，选择了文字才搜索，正在输入拼音时不触发搜索
    !lock && triggerSearch(inputVal);
  }, [lock, inputVal]);

最终效果

总结

之前我一直以为这不是个前端范畴的问题，是系统层面的，事实证明还是认知局限呀🤣今后还是要多多学习，多多记录。