React Native-如何处理TextInput onChangeText事件以在执行功能之前等待？

Question

我在React本机中有一个使用Text Input的搜索功能，但是搜索需要调用API，因此我想让onChangeText在用户输入2秒钟后继续运行，

我尝试使用setInterval或setTimeout，但这些都不起作用，

这是我尝试过的代码：

<TextInput
  placeholder="search"
  onChangeText={(text) => {
    setTimeout(() => {
      console.log(text)
      console.log("Kepanggil TimeOUTNYAA")
      params.onSearchText(text)
    }, 2000);
  }
}

//function onSearchText

onSearchText(searchText){
  this.setState({text:searchText},()=>{
    this._loadMore() // here's a function to call the API
  })
}

实际行为：

当我在am中输入TextInput时，显示我的日志：

预期行为：

我希望日志仅仅显示 am，不显示 a和am

有可能这样做吗？

Answer 1

您应该清除旧的超时时间，然后再设置新的超时时间

<TextInput
    placeholder="search"
    onChangeText={(text) => {
        if(this.searchWaiting)
            clearTimeout(this.searchWaiting);
        this.searchWaiting = setTimeout(() => {
            this.searchWaiting = null;
            console.log(text);
            console.log("Kepanggil TimeOUTNYAA")
            params.onSearchText(text)
        }, 2000);
    }}
/>

Answer 2

您根本无法在setTimeOut上放置onChangeText或任何类型的代码。它的回调函数意味着在事件触发后，您会收到一些text在您的情况下无用的{会触发bcz事件，并在onSearchText中调用API。）

您可以在onSearchText函数中执行操作，您可以有条件地返回text，例如如果文本长度大于2或3，则仅调用API。就像这样：< / p>

onSearchText(searchText){
  if(searchText.length > 3){
      this.setState({text:searchText},()=>{
         this._loadMore() // here's a function to call the API
      })
  }
}