React中输入框清空时如何将搜索state重置回初始状态？

问题原因 #

当你把输入框内容清空时，onSearch 接收到的name参数是空字符串，现有逻辑会直接携带空参数发起搜索请求，多数情况下这类无效请求会返回报错，不会执行到setSearch(data)的逻辑，因此之前的搜索结果就一直保留了下来。

解决方案 #

修改onSearch函数，新增空输入判断逻辑，检测到输入为空时直接重置search状态即可，还可以同步添加错误处理逻辑，避免搜索不存在的内容时状态异常：

function App() {
  const [input, setInput] = useState("");
  const [countries, setCountries] = useState([]);
  const [search, setSearch] = useState([]); 

  function onSearch(name) {
    // 新增判断：输入为空时直接重置搜索状态，不发起无效请求
    if (!name.trim()) {
      setSearch([]);
      return;
    }
    fetch(`https://restcountries.eu/rest/v2/name/${name}`)
      .then((r) => r.json())
      .then((data) => {
        setSearch(data);
      })
      // 新增错误捕获：请求失败时也重置搜索状态
      .catch(() => {
        setSearch([]);
      })
  }
  // 其余逻辑保持不变
}

可选优化 #

如果不想每次输入字符都触发请求，可以添加防抖逻辑，降低请求频率：

// 全局定义防抖函数
function debounce(func, delay = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  }
}

// App组件内用防抖包装onSearch
const debouncedSearch = debounce(onSearch);

// Form组件触发时调用debouncedSearch即可

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