Javascript 如何使用react钩子有条件地重置状态计数_Javascript_Reactjs_React Hooks_Next.js

Javascript 如何使用react钩子有条件地重置状态计数

javascript reactjs next.js

Javascript 如何使用react钩子有条件地重置状态计数,javascript,reactjs,react-hooks,next.js,Javascript,Reactjs,React Hooks,Next.js,用户提交我的表单后，handleSubmit函数运行并统计类名中包含“show”的li元素的数量，显示所有搜索结果。它用setStoreCount（prevCount=>prevCount+1）将这些计数相加，然后我更新了我的FAQ{searchCount}UI，其中显示了搜索结果的数量 useEffect(() => { setSearchCount(storeCount) // collect all storeCount }, [storeCount]) 问题是：假设第一次搜索

用户提交我的表单后，

handleSubmit

函数运行并统计类名中包含“show”的

li

元素的数量，显示所有搜索结果。它用

setStoreCount（prevCount=>prevCount+1）将这些计数相加

，然后我更新了我的

FAQ{searchCount}

UI，其中显示了搜索结果的数量

useEffect(() => {
  setSearchCount(storeCount) // collect all storeCount
}, [storeCount])

问题是：假设第一次搜索得到5个结果

然后UI将显示

FAQ 5

。如果再次搜索相同的内容，您仍然会得到5个结果，并且希望UI仍然显示

FAQ 5

，但是因为

storeCount

无法重置为

，它会显示

FAQ 10

（5+5），然后显示

FAQ 15

（5+5+5）等等

因为每当

storeCount

更改时，我的useEffect都会有条件地运行，所以我无法将其重置为0，因为这样我将始终显示

FAQ 0

在下面的代码中刷新每次搜索的计数时，如何显示搜索结果的数量

import React, { useState, useRef, useEffect } from 'react'

import ContentsWrap from '../../components/contents-wrap'
import FrequentList from './tabs/frequent'
import EstimateList from './tabs/estimate'
import ReturnList from './tabs/return'
import EtcList from './tabs/etc'
import SubsidiaryList from './tabs/subsidiary'
import ServiceList from './tabs/service'
import InList from './tabs/in'
import OutList from './tabs/out'

import styles from './index.module.scss'

export default function FAQ () {
  const [tab, setTab] = useState('frequent')
  const [storeText, setStoreText] = useState('') // stores searchbar text as user types
  const [searchText, setSearchText] = useState('') // sends searchbar text to List component props on form submit
  const [storeCount, setStoreCount] = useState(0) // stores count of each li element className that includes 'show'
  const [searchCount, setSearchCount] = useState(0) // shows search count in UI
  const searchContainer = useRef(null)
  const handleSubmit = e => {
    e.preventDefault()
    setSearchText(storeText)
    setTab('all')
    setTimeout(() => {
      // gets all <ul> children of <div class = "faq-list-wrap">
      for (let i = 0; i < searchContainer.current.children.length; i++) {
      // gets all <li> children of each <ul>
        for (let j = 0; j < searchContainer.current.children[i].children.length; j++) {
        // checks if each li class name has 'show'
          if (searchContainer.current.children[i].children[j].className.includes('show')) {
            console.log('count added')
            setStoreCount(prevCount => prevCount + 1)
          }
        }
      }
    }, 100) // setTimeOut needed to target searchContainer after search and not before
  }
  const handleChange = newId => {
    setTab(newId)
    setStoreText('') // clear input value on tab click
    setSearchText('') // show all search items on tab click
  }
  useEffect(() => {
    setSearchCount(storeCount) // collect all storeCount
  }, [storeCount])
  return (
    <ContentsWrap>
      <div className="content-wrap content-width">
        {/* <!-- S: faq-wrap --> */}
        <div className="faq-wrap">
          <div className="faq-title-wrap"><h2 className="title">FAQ {searchCount}</h2></div>
          <form onSubmit={handleSubmit}>
            <input
              type="text"
              placeholder="Search"
              className={styles.searchBox}
              value={storeText}
              onChange={e => {
                setStoreText(e.target.value)
              }}
            />
          </form>

          {/* <!-- S: faq-list-wrap --> */}
          <div className="faq-list-wrap" ref={searchContainer} >
            {tab === 'all' && (
              <>
                <FrequentList searchText={searchText} />
                <EstimateList searchText={searchText} />
                <ReturnList searchText={searchText} />
                <EtcList searchText={searchText} />
                <SubsidiaryList searchText={searchText} />
                <ServiceList searchText={searchText} />
                <InList searchText={searchText} />
                <OutList searchText={searchText} />
              </>
            )}
            {tab === 'frequent' && (
              <FrequentList searchText={searchText}/>
            )}
            {tab === 'estimate' && (
              <EstimateList searchText={searchText}/>
            )}
            {tab === 'return' && (
              <ReturnList searchText={searchText} />
            )}
            {tab === 'subsidiary' && (
              <SubsidiaryList searchText={searchText} />
            )}
            {tab === 'service' && (
              <ServiceList searchText={searchText} />
            )}
            {tab === 'in' && (
              <InList searchText={searchText} />
            )}
            {tab === 'out' && (
              <OutList searchText={searchText} />
            )}
            {tab === 'etc' && (
              <EtcList searchText={searchText} />
            )}
          </div>
          {/* <!-- E: faq-list-wrap --> */}
        </div>
        {/* <!-- E: faq-wrap --> */}
      </div>
    </ContentsWrap>
  )
}

import React，{useState，useRef，useffect}来自“React”
从“../../components/contents wrap”导入ContentsWrap
从“./tabs/frequent”导入频繁列表
从“./tabs/estimate”导入估算列表
从“./tabs/return”导入ReturnList
从“/tabs/etc”导入EtcList
从“./tabs/SubsidiaryList”导入子目录列表
从“./tabs/service”导入服务列表
从“/tabs/in”导入InList
从“./tabs/out”导入大纲视图
从“./index.module.scss”导入样式
导出默认函数FAQ（）{
const[tab，setTab]=useState（'frequency'）
const[storeText，setStoreText]=useState（“”）//将搜索栏文本存储为用户类型
const[searchText，setSearchText]=useState（“”）//发送搜索栏文本以列出表单提交中的组件道具
const[storeCount，setStoreCount]=useState（0）//存储包含“show”的每个li元素类名的计数
const[searchCount，setSearchCount]=useState（0）//在UI中显示搜索计数
const searchContainer=useRef（null）
常量handleSubmit=e=>{
e、 预防默认值（）
setSearchText（storeText）
setTab（'all'）
设置超时（（）=>{
//获取的所有子级
for（设i=0；i
for（设j=0；jprevCount+1）
}
}
}
}，100）//setTimeOut需要在搜索之后而不是之前以searchContainer为目标
}
常量handleChange=newId=>{
setTab（newId）
setStoreText（“”）//在单击选项卡时清除输入值
setSearchText（“”）//在单击选项卡时显示所有搜索项
}
useffect（（）=>{
setSearchCount（storeCount）//收集所有storeCount
}，[storeCount]）
返回(
{/*  */}
常见问题{searchCount}
{
设置存储文本（如目标值）
}}
/>
{/*  */}
{tab==='all'&&(
)}
{tab==='frequency'&&(
)}
{tab==='estimate'&&(
)}
{tab==='return'&&(
)}
{tab==='subsidiary'&&(
)}
{tab==='服务'&&(
)}
{tab==='in'&&(
)}
{tab==='out'&&(
)}
{tab==='etc'&&(
)}
{/*  */}
{/*  */}
)
}

这里的问题在于您的

设置存储计数逻辑
在for
循环的这一行中：
if (searchContainer.current.children[i].children[j].className.includes('show')) {
    console.log('count added')
    setStoreCount(prevCount => prevCount + 1)
}

它将1添加到prevCount
中，这意味着如果prevCount
为5（这是第一次搜索的结果数，它将1添加到该值中，依此类推
您可以做的是在添加找到的元素数之前重置storeCount
。如下所示：
setTimeout(() => {
      setStoreCount(0)
      // gets all <ul> children of <div class = "faq-list-wrap">
      for (let i = 0; i < searchContainer.current.children.length; i++) {
      // gets all <li> children of each <ul>
        for (let j = 0; j < searchContainer.current.children[i].children.length; j++) {
        // checks if each li class name has 'show'
          if (searchContainer.current.children[i].children[j].className.includes('show')) {
            console.log('count added')
            setStoreCount(prevCount => prevCount + 1)
          }
        }
      }
    }, 100) // setTimeOut needed to target searchContainer after search and not before

这里的问题在于设置存储计数逻辑
在for
循环的这一行中：
if (searchContainer.current.children[i].children[j].className.includes('show')) {
    console.log('count added')
    setStoreCount(prevCount => prevCount + 1)
}

它将1添加到prevCount
中，这意味着如果prevCount
为5（这是第一次搜索的结果数，它将1添加到该值中，依此类推
您可以做的是在添加找到的元素数之前重置storeCount
。如下所示：
setTimeout(() => {
      setStoreCount(0)
      // gets all <ul> children of <div class = "faq-list-wrap">
      for (let i = 0; i < searchContainer.current.children.length; i++) {
      // gets all <li> children of each <ul>
        for (let j = 0; j < searchContainer.current.children[i].children.length; j++) {
        // checks if each li class name has 'show'
          if (searchContainer.current.children[i].children[j].className.includes('show')) {
            console.log('count added')
            setStoreCount(prevCount => prevCount + 1)
          }
        }
      }
    }, 100) // setTimeOut needed to target searchContainer after search and not before

您的循环只是不断增加storeCount。您应该在循环开始时在零处启动计数器，然后使用setStoreCount将计数器的最终值分配到storeCount中。
您的循环只是不断增加storeCount。您应该在循环开始时在零处启动计数器循环，然后使用setStoreCount将计数器的最终值指定给storeCount