onreadystatechange内でのsetStateの仕方について

Question

openWeatherAPIで天気を取得しsetStateでweatherというステートに状態を格納したいと思っています

reactJSでopenweatherAPIを叩いて天気情報をstateに入れようとしたのですが、(オブジェクト名).onreadystatechangeからのsetStateで既存のstateに天気を入れようとしたところ下記のエラーメッセージが出てつまりました

this.setState is not a function 

該当のソースコード

xhr.onreadystatechange = function() {
  	  if(xhr.readyState === 4) {  //｢もしデータを取得して通信が完了しているなら」番号で状態が変わる(５種類)
				data = JSON.parse(xhr.responseText);
				this.setState({weather: data.weather[0].main})	;
  	  }
		}

試したこと

thisを記述する場所によって指定先がreactのコンポーネントに向いていない...ってことがぐぐって出てきたのですが、そこから理解できません、解決方法などあればよろしくお願いします

Answer 1

もしよろしければxhr.onreadystatechange = function() {...}の部分だけではなく、Reactの周辺コードも共有いただけますか？

以下、XMLHttpRequestがevent handlerの中で実行されてると想定の上での回答です。

その場合、以下コードの場合はthis.setState(…)の利用が可能かと思います。

    xhr.open(method, url, true);
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        this.setState({ asyncRequestStatus: xhr.status });
      }
    };
    xhr.send();

https://codepen.io/engineer_jp_us/pen/vbZxNz?editors=1010

Answer 2

この直後に

.bind(this);

をつけることで解決しました。でもどうして解決できたのかがイマイチわからず気持ち悪いです。