使用 useEffect 反应 debounce

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)
   })

** 编辑 **

以下作品，是的，我主要从/sf/answers/3826654891/得到提示 ，尽管我认为它略有不同

链接的帖子链事件 setQuery => useEffect => useRef => debounce 在这里我链接 useCallback => useRef => debounce

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

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>
  )

}

Answer 1

您可以创建具有去抖功能的自定义组件输入（或在另一个组件中使用），而无需库

例如像这样的一些：

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

const InputDebounce = () => {

    const [text, setText] = useState('');

    useEffect(() => {
        const timeoutId = setTimeout(() => {
            console.log(text)
            //some function here
        }, 500);

        return () => clearTimeout(timeoutId)
    }, [text])


    return <input type="text" onChange={(e) => setText(e.target.value)} />
};

export default InputDebounce;

clearTimeOut 定义useEffect 的返回 insde非常重要，这样工作就可以了。