Verbotener Fehler Bei Eingabe in das Eingabefeld

Question

bekomme ich einen verbotenen Fehler 403 im Browser wenn ich im Eingabefeld zu schnell tippe. Ich verwende Reagieren Js mit Knoten und Express auf dem Backend.

Folgendes ist mein Code, der die Eingabe enthält.

import React, {Component, PropTypes} from 'react'; 

export default class SearchBox extends Component { 

    constructor(props) {  
     super(props); 
     this.state = { 
      name: "", 
      typing :false, 
      typingTimeOut :0, 
     }; 
     this.changeName=this.changeName.bind(this); 
     this.sendtoParent=this.sendtoParent.bind(this); 
    } 

    changeName(event) { 
     const self=this; 

     if(self.state.typingTimeOut) 
     { 
      clearTimeout(typingTimeOut); 
     } 

     self.setState({ 
      name: event.target.value, 
      typing:false, 
      typing: setTimeout(function(){ 
       self.sendtoParent(self.state.name)},1000) 
     }); 
    } 

    sendtoParent(){  
     this.props.searching(this.state.name,"true"); 
    } 

    render() { 
     return (
      <div > 
       <input 
        style={styles} 
        id="SearchBox" 
        type="text" 
        placeholder='Enter the name' 
        onChange={this.changeName} 
       />     
      </div> 
     ); 
    } 
} 

Mein Name geht an die Eltern, die mir die erforderliche json von Github Search API später gibt. Mein Code funktioniert einwandfrei, wenn ich normal tippe, aber es gibt den 403-Fehler bei Typing Fast.

Answer 1

In Github ist die Anzahl der Anfragen pro Sekunde begrenzt, die Sie senden können. Sie versuchen, ein Zeitlimit in Ihre Methode einzuführen, um das Senden von Anfragen zu verzögern, was ein netter Ansatz ist, aber die Art, wie es implementiert wird, wird nicht funktionieren.

Der einfachste Weg ist Ihre Change Funktion, so etwas zu ändern:

changeName(event) { 
    const self=this; 

    if(self.typingTimeOut) 
    { 
     clearTimeout(self.typingTimeOut); 
    } 

    self.typingTimeOut = setTimeout(function(){ 
      self.sendtoParent(self.state.name)},1000); 

    self.setState({ 
     name: event.target.value, 
     typing:false 
    }); 
}