如何去抖动一个函数？

Question

I'm trying to set a timer for onChange but I don't understand why it doesn't work. I tried several methods, but none worked. What can I change to make it work?

import React, {useState} from 'react'
import { debounce } from "lodash";
const Search = ({getQuery}) => {
const [text, setText] = useState('')

 const onChange = (q) => {
    setText(q)
    getQuery(q)
}

const handleDebounce = () => {
    debounce(onChange, 3000);
};

return (
    <section className='search'>
        <form>
            <input 
            type='text'
            className='form-control'
            placeholder='Search characters'
            value={text}
            onChange={(e) => handleDebounce( onChange(e.target.value), 3000)}
            autoFocus
            />
        </form>
    </section>
)}

export default Search

Answer 1

removce handleDebounce completely and call your own onChange at the input onChange

onChange={onChange}

then adjust your onChange implementation as:

const onChange = (e) => {
  const query = e.target.value;
  setText(query);
  debounce(() => getQuery(query), 3000);
}