Question

我正在尝试使用反跳功能实现自动完成搜索，

以下是我尝试使用lodash的去抖功能，似乎不起作用。

输入时我正在搜索每个字符

   const [query, setQuery] = useState('')
   const _search = () => {
     console.log('query: ', query)
     // network search request
   }

   const search = _.debounce(_search, 300)

   useEffect(() => {
     search()
   }, [query])

   const handleChangeQuery = useCallback((query) => {
     setQuery(query)
   })

**编辑**

以下作品，是的，我主要从https://stackoverflow.com/a/54666498/433570得到了提示尽管我认为这有点不同

链接的链接链事件setQuery => useEffect => useRef =>去抖动在这里，我链接useCallback => useRef =>反跳

尽管核心问题（根据链接文章）是每次调用功能组件时都要在组件内部重新创建变量。

useRef保存它。

我了解useCallback记住了该函数，但是当因变量更改时它也会丢失

这有点含糊，我以为useCallback会为您提供记忆功能，但是如果将以下代码从useRef更改为useCallback，它将停止工作。.（尽管我们不使用因变量，例如useCallback(() => {}, [var])

const ReviewMetaSelect = (props) => {

  const [query, setQuery] = useState('')


  const search = useRef(_.debounce(query => {

    console.log('query: ', query)

  }, 300))


  // or u can use this
  //const search = useCallback(_.debounce(query => {

    //console.log('query: ', query)

  //}, 300), [])    

   const handleChangeQuery = useCallback((query) => {
     setQuery(query)
     search.current(query) // or search(query) with useCallback
   })

  return (
    <View>
      <TextInput
        value={query}
        onChangeText={handleChangeQuery}
      />
    </View>
  )

}

用useEffect反应去抖动

0 个答案: