如何去抖動搜索欄功能？

Question

我正在嘗試為搜索欄設置一個 onChange 計時器，但我不知道具體如何。 我嘗試了幾種選擇，但都沒有奏效。 應該如何創建和調用 debounce 函數？ 我是否必須創建一個特殊的函數，或者我如何調用 // onChange 可以嗎？ 你能幫我提供一些信息嗎？

搜索：

import React, {useState} from 'react'
import { debounce } from "lodash";

const Search = ({getQuery}) => {
const [text, setText] = useState('')

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

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

export default Search

應用程序：

function App() {

const [items, setItems] = useState([])
const [info, setInfo] = useState([])
const [isLoading, setIsLoading] = useState(true)
const [query, setQuery]=useState('')
const [page, setPage] = useState(1)
const [id, setId] = useState()
const [status, setStatus] = useState()

useEffect(() => {
const fetchItems = async () => {
  const result = await axios(`https://rickandmortyapi.com/api/character?name=${query}&page=${page}&id=${id}`)

  setItems(result.data.results)
  setInfo(result.data.info)
  setIsLoading(false)
}

fetchItems()
}, [query, page, id ])

return (

<div className='container'>

<Router>
  <Switch>
    <Route exact path='/' >
      <Header />
      
      <Search getQuery={(q) =>setQuery(q) } />
      
      <Dropdown getStats={(s) => setStatus(s) } />
      <Character isLoading={isLoading} items={items} />
    </Route>
     <Route path='/character/:id'>
      <Header />
      <InfoCaracter key={items.id} items={items} />
    </Route>
  </Switch>
</Router>

</div>
)}

export default App;

Answer 1

您可以使用單獨的狀態來存儲請求的數據並僅在此值更改時調用getQuery

const Search = ({ getQuery }) => {
    const [text, setText] = useState('');
    const [debouncedValue, setDebouncedValue] = useState(text);

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedValue(text);
        }, 300);

        return () => {
            clearTimeout(handler);
        };
    }, [text]);

    useEffect(() => {
        getQuery(debouncedValue);
    }, [getQuery, debouncedValue]);

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

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