debounce Lodash-反应自然

Question

我想在文本输入中使用loadash debounce(React Native App(
为什么我的debounce不能正常工作？？当我按下退格键时，textInput中的输入值消失/重新出现。

handleSearch(text, bool){
// search logic here
}
<TextInput  
value={value} 
onChangeText={_.debounce((text) =>{this.handleSearch(text, true);this.setFlat(true);this.renderDropDown(false)},200)}  
onKeyPress={({ nativeEvent }) => {
if (nativeEvent.key === 'Backspace' && value !== "") {
this.handleClearText();
}     
if (nativeEvent.key === 'Backspace' && value === "") {
this.handleClearFilter();
}             
}}  
/>

Answer 1

class MyComponent extends React.Component {
constructor() {
this.onChangeTextDelayed = _.debounce(this.onChangeText, 2000);
}
onChangeText(text) {
console.log("debouncing");
}
render() {
return <Input onChangeText={this.onChangeTextDelayed} />

Answer 2

您没有按预期方式使用回调。如果保持这种状态，那么每次呈现组件时，都会执行该段代码，此外，如果该呈现是因为该事件而激发的。

您应该将代码移动到和方法/函数，并将该方法/函数指定为回调。类似这样的东西：

const handleTextChange = _.debounce((text) =>{
this.handleSearch(text,true);
this.setFlat(true);
this.renderDropDown(false)
},200);
/* .... */
<TextInput  
value={value} 
onChangeText={handleTextChahge}    
/>

Answer 3

如何导入loadash？你能试试这个吗？

import debounce from 'lodash.debounce';
<TextInput
value={value}
onChangeText={debounce((text) => {

this.handleSearch(text,true);
this.setFlat(true);
this.renderDropDown(false) 
}, 300)}
placeholder={placeholder}
style={styles.textInput}
/>