使用 React Native 实时搜索 API 结果

Question

我正在按照教程创建我的第一个 React Native 应用程序。我正在使用 themoviedb.org 中的搜索 API，我想在每次用户更改输入时刷新结果（而不是在他们单击“搜索”按钮时刷新。）

我正在使用 TextInput 和 onChangeText，但如果用户键入速度太快，就会出现问题。我发现一个可能的解决方案是使用 "debounce" 但我真的不知道如何在我的代码中使用它。

这是我的代码：

//Search.js

import React from 'react'
import { StyleSheet, View, TextInput, Button, FlatList, Text, ActivityIndicator } from 'react-native'

import FilmItem from './FilmItem'
import { getFilmsFromApiWithSearchedText} from '../API/TMDBApi'
import { debounce } from 'lodash'

class Search extends React.Component {

constructor(props){
  super(props)
  this.page = 0
  this.totalPages = 0
  this.state = { films: [], isLoading: false, searchedText:""}
}

_loadFilms(){
  if(this.state.searchedText.length > 0){
    this.setState({isLoading:true})
    console.log(this.state.films)
    getFilmsFromApiWithSearchedText(this.state.searchedText, this.page+1).then(data => {
      this.page = data.page
      this.totalPages = data.total_pages
      this.setState({ films: [...this.state.films, ...data.results]
        , isLoading:false})
    })
  }
}

_displayLoading(){
  if(this.state.isLoading){
    return (
      <View style={styles.loading_container}>
        <ActivityIndicator size='large' color='blue'/>
      </View>
    )
  }
}

_searchFilms(text){
    this.page = 0
    this.totalPages = 0
    this.setState({
      films:[], searchedText:text
    }, () => {
      this._loadFilms()
    })
}

_displayDetailForFilm = (idFilm) => {
  console.log("Display film with id " + idFilm)
  this.props.navigation.navigate("FilmDetail", {idFilm: idFilm})
}

/*_searchTextInputChanged(text){
  this.searchedText = text
}*/

render(){
  return (
    <View style={styles.main_container}>
      <TextInput style={styles.textinput}
      placeholder = 'titre du film'
      onChangeText={(text) => this._searchFilms(text)}
      />
      <Button title = 'Rechercher' /*onPress={()=>this._loadFilms()}*//>
      {this._displayLoading()}
      <FlatList
        data={this.state.films}
        keyExtractor={item => item.id.toString()}
        renderItem={({item}) => <FilmItem film={item} displayDetailForFilm={this._displayDetailForFilm} />}
        onEndReachedThreshold={0.5}
        onEndReached={() => {
          if(this.page < this.totalPages){
            this._loadFilms()
          }
        }}
      />
    </View>
  )
}

Answer 1

您可以尝试使用计时器来等待用户完成输入。试试像

constructor(props){
    super(props)

    this.searchTimer = null
}

setSearchTimer(text){
    clearTimeout(this.searchTimer)
    this.searchTimer = setTimeout(() => {
        this._searchFilms(text)
    }, 1000);
}

...

<TextInput style={styles.textinput}
    placeholder = 'titre du film'
    onChangeText={(text) => this.setSearchTimer(text)}
/>

使用 React Native 实时搜索 API 结果

Real Time search with API results using React Native

react-native

mobile

debounce