React Native - 延遲後保存搜索條件

我正在創建一個搜索工具欄，允許用戶使用Realm Browser作爲我的數據庫查看最近的搜索。每當用戶鍵入TextInput組件時，我都會保存搜索，但是，我不想在每次擊鍵後添加搜索詞，但只有在用戶停止鍵入一段時間後纔會添加搜索詞。React Native - 延遲後保存搜索條件

handleOnChange功能2秒

handleOnChange(text) { 
    this.setState({ 
     searchStr: text 
    },() => setTimeout(() => { 
     this.getResults() 
    }, 2000)) 
    }

在getResults後，將更新狀態，只有呼叫getResults，我打電話給我的addRecentSearch功能，如果滿足一定的條件。

getResults() { 
    let searchTags = [] 
    let searchCalcs = [] 
    let tagNames = this.state.tags.map((tag) => { 
     return tag.name 
    }) 
    if (this.state.searchStr.length >= 2 || this.state.tags.length !== 0) { 
     searchCalcs = Realm.searchCalcs(this.state.searchStr, tagNames) 
     Realm.addRecentSearch(this.state.searchStr) 
    } 

    this.setState({ 
     results: searchCalcs, 
     tagsForFiltering: searchTags 
    }) 
    }

所以我使用setTimeout來允許足夠的時間讓我的狀態在用戶輸入時得到更新。然後，一旦狀態被更新，我將要添加搜索查詢。但是，抓取最近的搜索時，我沒有得到預期的結果。

例如：

Type: "h" 
Result: nothing happens as str must be at least 2 characters in length 

Type: "he" 
Result: meets criteria, and will add "he" as a recent search term. 
Arr: ["he"] 

Type: "heart" (Note: adding 3 characters in succession) 
Result: It seems that even with the timeout function, my getResults function is being called (thus adding the search query for each character I added) 
Arr: ["he", "heart", "heart", "heart"]

我想我改編的樣子：

arr: ["he", "heart"]

來源

2017-09-05 jamesvphan

你不完全在你的例子去抖動。你只是把時間推遲了2000毫秒。您需要創建一個計時器，然後在每次發生更改時重置計時器（通過再次清除並啓動計時器）。這樣，只有最後的「延遲」纔會生效。合理？

你已經寫得非常接近你自己的去抖功能，所以你可以使用clearTimeout，或者有一些庫去做。見Lodash https://lodash.com/docs/#debounce

來源

2017-09-05 21:51:48 groodt

React Native - 延遲後保存搜索條件

回答

相關問題