Запрещенная ошибка При быстром вводе ввода в поле ввода

Question

Я получаю запрещенную ошибку 403 в браузере , когда я набираю слишком быстро в поле ввода. Я использую React Js с узлом и Express на бэкэнд.

Ниже приведен код, в котором хранятся данные.

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> 
     ); 
    } 
} 

Меня зовут идет учредителю, который позже дает мне необходимую JSON из Github Search API. Мой код работает отлично, когда я печатаю нормально, но он дает ошибку 403 в Typing Fast.

Answer 1

Github имеет ограничение по количеству запросов в секунду, которое вы можете отправить. Вы пытаетесь ввести тайм-аут в своем методе, чтобы отложить отправку запросов, что является хорошим подходом, но так, как он реализован, он не будет работать.

Самый простой способ изменить вашу функцию changeName на что-то вроде этого:

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 
    }); 
}