React搜索无匹配结果时如何console.log输出No Result Found

你现有代码存在两个核心问题，导致无匹配结果时无法正确触发提示：

• React状态更新是异步行为：调用setSearchInput(searchValue)后，当前函数作用域内的searchInput仍然是更新前的旧值，直接用它做过滤判断会出现取值错误，应该直接使用传入函数的参数searchValue做逻辑处理。
• 缺失过滤结果为空的判断分支：原有逻辑仅在接口返回的原始数据APIData为空时设置错误状态，没有覆盖「用户有输入、原始数据存在，但没有匹配项」的场景。

修正后代码 #

直接在过滤逻辑结束后判断匹配结果长度，为空时触发错误状态和日志输出即可：

const [APIData, setAPIData] = useState([]);
const [searchError, setSearchError] = useState(false);
const [filteredResults, setFilteredResults] = useState([]);
const [searchInput, setSearchInput] = useState('');
const [loading, setLoading] = useState(false);

const searchItems = (searchValue) => {
  setSearchInput(searchValue)
  setLoading(true)
  setSearchError(false)

  // 直接用传入的searchValue做判断，避免读取到旧的searchInput状态
  if (searchValue !== '') {
    const filteredData = APIData.filter((post) => {
      return Object.values(post)
        .join('')
        .toLowerCase()
        .includes(searchValue.toLowerCase())
    })
    setFilteredResults(filteredData)
    
    // 新增：判断过滤结果是否为空
    if (filteredData.length === 0) {
      setSearchError(true)
      console.log("No Result Found")
    }
  } else {
    // 输入为空时直接展示全量数据
    setFilteredResults(APIData)
  }
  setLoading(false)
}

可选优化 #

如果你希望日志输出和状态变更严格绑定，也可以用useEffect监听searchError状态，状态为true时统一输出日志：

import { useEffect } from 'react';

// 放在组件内部即可
useEffect(() => {
  if (searchError) {
    console.log("No Result Found")
  }
}, [searchError])

这种写法更适合后续需要在无结果时追加其他统一逻辑（比如埋点、提示弹窗）的场景，不用在多个触发searchError的位置重复写代码。

注意：如果APIData是接口异步获取的，要等接口请求完成、APIData完成赋值之后再绑定搜索输入的触发逻辑，避免接口还没返回数据时误判无结果。

内容的提问来源于stack exchange，提问作者sultan.h