Comment éviter de demander trop de requêtes HTTP lors de la modification de texte

Question

1. J'envoie une requête GET pour changer de texte.
2. Donc, si je recommande 'my_username' au point initial et que l'utilisateur passe à 'hi_user', j'envoie environ 18 requêtes GET.

La demande est comme ci-dessous ce

url: ${ROOT_URL}/profile/unamecheck/?un=${username} 
body: username 
response: {valid: true} 

Here is my React Code 
_handleChange = async (username) => { 
    this.setState({username}) 
    let response = await axios.get(`${ROOT_URL}/profile/unamecheck/?un=${username}`) 
    if (response.status === 200) { 
     if(response.data.obtained) { 
      this.setState({isValidUsername: false}) 
     } else { 
      this.setState({isValidUsername: true}) 
     } 
    } else { 

    } 
    console.log('isValidUsername'); 
    console.log(this.state.isValidUsername); 
    } 

Answer 1

Il est inutile d'envoyer une demande pour chaque touche un utilisateur fait. Des bibliothèques existent pour limiter ces demandes - les requêtes ne sont déclenchées que lorsque l'utilisateur arrête de taper.

La page debounce plugin a une démo sur sa mise en œuvre - vous pouvez le vérifier dans votre navigateur.

Pour réagir natif, la logique de cette answer pourrait être mis en œuvre (il utilise lodash's debounce):

class MyComponent extends React.Component { 
    constructor() { 
    this.onChangeTextDelayed = _.debounce(this.onChangeText, 2000); 
    } 

    onChangeText(text) { 
    console.log("debouncing"); 
    } 

    render() { 
    return <Input onChangeText={this.onChangeTextDelayed} /> 
    } 
}