reactjs 如何检测用户是否正在输入react native?

ma8fv8wu  于 2022-11-04  发布在  React
关注(0)|答案(3)|浏览(255)

我在react native中有一个应用程序,我正在开发一个搜索功能,比如Instagram。这就像如果用户停止输入,就向他显示他的查询结果。我目前的方法是搞砸redux。有时它会多次返回相同的元素,有时会返回与查询无关的随机元素。现在。我正在调用搜索API,因为用户在搜索栏中开始输入。
下面是我组件的代码。

import { getSearchDataApi } from "../../api/search/search";
import { clearSearchData, setSearchData } from "../../redux/action/search";

const SearchScreen =(props)=>{
  const [autoFocus,setAutoFocus] = useState(true)
  const [keyWord,setKeyWord] = useState(null)
  const [isLoading,setIsLoading] = useState(false)
  const [isError,setIsError] = useState(false)
  const [pageNumber,setPageNumber] = useState(1)
  const [loadMore,setLoadMore] = useState(true)

  const loadMoreDataFunc =()=>{
      if (pageNumber <= props.totalSearchPage) {
          setPageNumber(pageNumber+1) 
      }
      else {
          setLoadMore(false)
      }
  }

 const searchData = async(keyWord)=>{
    console.log(keyWord,pageNumber)
    try {
      setIsLoading(true)
      var searchResponse = await getSearchDataApi(keyWord,pageNumber)
      props.setSearchData(searchResponse.data)
      setIsLoading(false)
    }
    catch (e) {
      setIsError(true)
      console.log("Error --- ", e.response.data.message)
      showMessage({
          message: e.response.data.message,
          type: "danger",
      });
      }
    }

  return (
    <View>

     ....
    </View>
)
}

const mapStateToProps = (state)=>({
  searchData: state.searchReducer.searchData,
  totalSearchPage: state.searchReducer.totalSearchPage,
})

export default connect(mapStateToProps,{setSearchData,clearSearchData})(SearchScreen);

我真的很感谢每一个能帮我修理的人。提前感谢!

***目标:***我想要达到的目标是,当用户停止输入时,我调用searchAPI,使用他/她在searchBar中输入的关键字,仅此而已。

我也试过setTimeOut,但那让事情变得更糟。

hof1towb

hof1towb1#

解决这个问题的最佳方法是将负责用户输入的状态变量debounce,这样,您就可以使用effect钩子来监视debounced变量的变化,并在满足搜索API变量的条件时调用搜索API。

ipakzgxi

ipakzgxi2#

好吧,我已经投入了一些努力来解决它与setTimeout再次,我已经做到了以下代码片段。

useEffect(()=>{
    setPageNumber(1)
    props.clearSearchData()
    const delayDebounceFn = setTimeout(() => {
      console.log(keyWord)
      if (keyWord) {
        searchData(keyWord)    
      }
    }, 500)
    return () => clearTimeout(delayDebounceFn)
  },[keyWord])
guicsvcw

guicsvcw3#

你可以使用setInterval来创建一个从2到0或者从3到0的countDown,把它置为一个state。每当用户键入时,onChange就被调用,从你的回调中重置countDown。
使用useEffect并将countDown作为依赖项,可以在倒计时达到0时打开搜索结果。(这意味着用户自2秒前以来没有键入任何内容)
这可能有助于创建倒计时https://blog.greenroots.info/how-to-create-a-countdown-timer-using-react-hooks

相关问题