this.setState, bir işlev değil

Question

Belirli bir öğeye olay başlatıldığında güncelleştirilen durumu koruyan ve durum güncelleştirildiğinde başka bir bileşene aktarma olarak aktarılan aşağıdaki bileşene sahibim. Şu anda "this.setState bir işlev değil" hatası alıyorum nedenini deneyin, büyük olasılıkla doğru içeriğe bağlı değil. Ama bundan emin değilim, bunu doğru mu yapıyorum?

export default class SearchBox extends Component{ 

    constructor(){ 
     super() 
     console.log("search box imported"); 
     this.state = { 
      results:[] 
     }; 
    } 

    //this.setState({result: arrayExample}) 

    searchGif(event) { 
     if(event.keyCode == 13){ 
      let inputVal = this.refs.query.value; 
      let xhr = new XMLHttpRequest(); 
      xhr.open('GET', 'http://api.giphy.com/v1/gifs/search?q='+inputVal+'&api_key=dc6zaTOxFJmzC', true); 
      xhr.onreadystatechange = function(){ 
       if(xhr.readyState == 4 && xhr.status == 200){ 
        // this.response = JSON.parse(xhr.responseText); 
        let returnedObj = JSON.parse(xhr.responseText); 
        //console.log(returnedObj.data); 
        let response = returnedObj.data.map(function(record){ 
         let reformattedArray = { key: record.id, 
                id: record.id, 
                thumbnailUrl: record.images.fixed_height_small_still.url 
               }; 
               return reformattedArray; 
        }); 
        console.log(response); 
        this.setState({results: response}); 
       } 
      } 
      xhr.send(); 
     } 
    } 


    render(){ 

     return(
      <div> 
       <input className="search-input" ref="query" onKeyDown={this.searchGif.bind(this)} name="search" placeholder="Search"/> 
       <GifSwatch data={this.state.results} /> 
      </div> 
     ); 
    } 
} 

DÜZENLEME: Sadece bağlamı fark "onreadystatechange" işlevini değişeceği, bu yüzden Sen Tepki sınıf this bağlamını kaybediyor searchGif

searchGif(){ 
    //other logic 
    var self = this; 
    xhr.onreadystatechange = function(){ 
    //ajax logic 
    self.setState({results: repsonse}); 
    } 
} 

Answer 1

aşağıdaki yaptı. Bağlayın ve ayrıca async geri arama işlevine de bağlayın.

Ok işlevleriyle ilgili harika bir şey, sizin için bağlamınızı bağlamalarıdır ve sözdizimi de harikadır. olumsuz tarayıcı desteği. Çapraz tarayıcı performansı için ES5 sözdizimini derlemek için bir polifiz veya derleme işleminizin olduğundan emin olun.

Eğer bunlardan herhangi birini yapamazsanız, o zaman bu bağlamın bir gölge değişkenini onreadystatechange işlevinin dışında bir gölge yapın ve this yerine kullanın.