如何处理前端搜索中查询为空时API仍返回数据的问题？

算力阿峰

2026-8-15

解决空查询时API返回数据的问题

当前代码存在的问题：当搜索输入为空（或仅含空格）时，仍会调用Spotify API并返回默认数据，导致界面展示无关结果。

解决方案

核心思路是在发起API请求前先校验输入内容，只有存在有效输入时才调用接口，空输入时直接清空展示列表。

修改后的代码示例

1. 调整数据获取函数

/*fetching the data from an API*/
function searchArtistes() {
  // 去除输入首尾空格，判断是否为有效内容
  const trimmedInput = searchInput.trim();
  if (!trimmedInput) {
    // 空输入时清空展示数据
    setArtisteData([]);
    return;
  }

  const options = {
    method: "GET",
    headers: {
      "X-RapidAPI-Key": "86f453f970msh48154777add2da0p1e185cjsn969596f1a317",
      "X-RapidAPI-Host": "spotify81.p.rapidapi.com",
    },
  };

  fetch(
    `https://spotify81.p.rapidapi.com/search?q=${trimmedInput}&type=multi&offset=0&limit=10&numberOfTopResults=5`,
    options
  )
    .then((response) => response.json())
    .then((response) =>
      setArtisteData(
        response.artists.items.map((artist) => artist.data.profile.name)
      )
    )
    .catch((err) => console.error(err));
}

2. 修正输入框的事件参数传递

/* function fetching the data is called by an onChange event listener in the input */
<form className="search-input flex justify-between  md:items-center">
  <div className="flex md:flex-row-reverse">
    <input
      placeholder="search artists"
      // 正确传递event参数，确保handleChange能获取输入值
      onChange={(event) => {
        handleChange(event);
        searchArtistes();
      }}
      className="search ml-6 "
    />
    <img
      src={search}
      className="search-icon md:ml-12 lg:ml-14 2xl:ml-18"
    />
  </div>
</form>