"用 useEffect 反应去抖动"

Question

我正在尝试使用 debounce 实现自动完成搜索，

下面是我使用 lodash 的 debounce 的尝试，似乎 debounce 不起作用。

我在输入时看到每个字符都在被搜索

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

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 的 return insde 非常重要，这样可以正常工作。