gpt4 book ai didi

javascript - 如何使用 Debounce Lodash React Native 加快搜索速度

转载 作者:行者123 更新时间:2023-12-03 01:16:56 25 4
gpt4 key购买 nike

如何使用 debounce 加快搜索速度?现在搜索可以工作,但加载速度非常慢。我想这是因为每次按下按键时它都会进行搜索。我查看了其他示例,但无法将其应用到我自己的场景中。我在主组件内的 AutoComplete 组件内的 onChangeText 上调用我的过滤器方法。我如何针对我的场景消除这种情况,因为我需要在过滤中传递文本。

搜索

  filterRooms = (text) => {
const { rooms } = this.state;
if(text && text.length > 0) {
newSearch = rooms.filter(room => room.toLowerCase().includes(text.toLowerCase()))
}

// set the state
this.setState({ rooms: newSearch, query: text, hideResults: false });

}
}

自动完成

<Autocomplete
data={this.state.rooms}
defaultValue={query}
hideResults={ hideResults }
onBlur={ () => this.setState({ hideResults: true }) }
onFocus={ () => this.setState({ hideResults: false }) }
onChangeText={ text => this.filterRooms(text) }
renderItem={item => (
<TouchableOpacity onPress={() => this.setState({ query: item })}>
<Text>{item}</Text>
</TouchableOpacity>
)}
/>

最佳答案

首先,我建议需要最少的字符来开始自动完成搜索。为什么从 1 个字符开始?通常此值设置为 2。

之后你可以用 _.debounce 包裹 filterRooms :

constructor(props) {
super(props);
this.filterRooms = _.debounce(this.filterRooms, 1000);
}
filterRooms = (text) => {
const { rooms } = this.state;
if(text && text.length > 0) {
newSearch = rooms.filter(room => room.toLowerCase().includes(text.toLowerCase()))
}
}

关于javascript - 如何使用 Debounce Lodash React Native 加快搜索速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51970276/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com