React Hooks中如何条件重置state计数以刷新FAQ搜索结果数？

原有计数逻辑存在两处设计缺陷，直接导致了结果累加、UI闪0的问题：

• 遍历符合条件的列表项时，每匹配一个就触发一次setStoreCount(prevCount => prevCount + 1)的状态更新，且每次新搜索开始前没有清空历史累加值，多次搜索的结果会不断叠加
• 多了一层没必要的状态同步链路：先用storeCount存中间计数，再通过useEffect把storeCount的值同步到searchCount用于UI展示。如果提前把storeCount重置为0，会立刻触发useEffect把UI的搜索数刷成0，形成逻辑死结

完全不需要保留两层计数状态，把计数流程调整为「先完成全量计算、再一次性更新UI」，就能同时解决累加和闪0的问题：

• 移除冗余的状态链路
  删掉storeCount状态定义，也删掉之前用来同步两个计数状态的useEffect代码块，只保留最终用于UI展示的searchCount状态即可。
• 重写提交表单后的计数逻辑
  把原来循环内匹配到一个列表项就更新一次状态的写法，替换成用普通局部变量在循环里累加总数，等全量遍历完成后，再把最终的总数一次性赋值给searchCount。
  修改后的handleSubmit核心逻辑参考：

  const handleSubmit = e => {
    e.preventDefault()
    setSearchText(storeText)
    setTab('all')
    setTimeout(() => {
      let matchedResultCount = 0
      // 遍历搜索容器下的所有节点
      for (let i = 0; i < searchContainer.current.children.length; i++) {
        // 检查每个ul下的li类名
        for (let j = 0; j < searchContainer.current.children[i].children.length; j++) {
          if (searchContainer.current.children[i].children[j].className.includes('show')) {
            matchedResultCount += 1
          }
        }
      }
      // 全部遍历完成后，一次性更新UI的计数
      setSearchCount(matchedResultCount)
    }, 100)
  }
  

• 每次搜索的计数都是从0开始独立计算的，不会叠加历史搜索的结果，哪怕两次搜同一个关键词返回相同数量的结果，也会稳定显示对应数值
• 整个计数计算过程完全不触发React状态更新，不会在计数中途触发UI刷新，自然也就不会出现“提前重置为0导致UI一直显示0”的问题——毕竟等所有列表项都统计完成，才会把最终的准确值同步到UI
• 去掉了多余的状态同步步骤，减少了不必要的组件重渲染，逻辑链路也更短

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