React Native：lodash debounce 不起作用？

Question

在我的 react native 應用程序中，我有一個文本輸入供用戶鍵入和搜索，我想使用 lodash debounce 以便自動搜索更高效，但由於某種原因，我的結果數組從未填充過，而且我也不是控制台登錄任何東西。 ..

有趣的是，如果不是在 debounce 操作中更改 state 而不是在 debounce 操作中更改結果數組而不是 debounce 它實際上工作正常，但是搜索每個鍵更改似乎很多，是嗎？ 我不是在做 fetches，而是在 javascript 搜索，這將是更好的性能明智。

這是我的代碼：

const handleSearchChange = (value)=>
    {
        setSearch(value);
        let results = filterSearch(allProducts);
        
        _.debounce(e => {
            console.log('Debounced search:', e);
            setResults(results);
        }, 1000);
        
        //setResults(results);
    }

<TextInput onChangeText={value => handleSearchChange(value)} value={search} style={{ width:'90%', height:'100%', borderRadius:5, padding:10, color:'rgb(68,68,68)',fontSize:16, backgroundColor:'rgba(255,255,255,1)', alignItems:'center' }} placeholder="Donde vamos hoy?"></TextInput>

Answer 1

_.debounce返回您需要調用的function （將被去抖）。 但是在 React 中，每次重新渲染都會使用這種方法創建一個新的 function，因此您只需在安裝時創建一次去抖動的 function，而不是在每次渲染時創建一次，這可以通過參考來完成：

const debounceSearchRef = useRef(_.debounce(
  () => {
    setResults(filterSearch(allProducts));
  },
  1000
));
const handleSearchChange = (value) => {
  setSearch(value);
  debounceSearchRef.current();
};