Next.js输入框文本变更触发API请求问题：仅回车执行getRank()

你当前的代码问题出在输入框的onKeyDown直接绑定了getRank函数，这会导致每按下一次按键（包括输入字符的普通按键）都会执行getRank发起请求。而你已经定义了handleEnter函数来判断回车键，只需要把这个函数绑定到输入框的onKeyDown上即可。

修改后的完整代码：

export default function Home() {
  // useState and all that

  const handleEnter = (e) => {
    if (e.key === "Enter") {
      getRank();
    }
  };

  function getRank() {
    const str = searchText;
    const parsed = str.split("#");
    axios.get("http://localhost:4000/info", { params: {username: parsed[0], tag: parsed[1]} })
    .then(function (response) {
      setRank(response.data)
      element.classList.add('out')
    }) .catch(function(error) {
      console.log(error);
    })
  }

  return (
    <div className="main">
      <h1>Welcome</h1>
      <input 
        className="input" 
        type="text" 
        onChangeText={(val) => {setSearchText(val)}} 
        onKeyDown={handleEnter}  {/* 替换为handleEnter而非getRank */}
      ></input>
    </div>
  )
}

关键修改说明： #

• 把输入框的onKeyDown={getRank}改成onKeyDown={handleEnter}，借助你已经写好的handleEnter函数，只有检测到回车键时才会触发getRank发起API请求。
• 保留handleEnter的判断逻辑，它会自动过滤掉普通输入按键的触发，避免不必要的请求开销。

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