React Native：lodash debounce 不起作用？答案

【问题标题】：React Native: lodash debounce not working?React Native：lodash debounce 不起作用？
【发布时间】：2020-12-03 18:16:58
【问题描述】：

在我的 react native 应用程序中，我有一个文本输入供用户键入和搜索，我想使用 lodash 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>

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

_.debounce 返回一个您需要调用的函数（将被去抖动）。但是在 React 中，每次重新渲染都会使用这种方法创建一个新函数，因此您只需在挂载时创建一次去抖动函数，而不是在每次渲染时创建一次，这可以通过 ref 完成：

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

【讨论】：