React setState関数の軽微な問題

Question

実際にはなぜこれが機能していないのか分かりません。通常の方法よりもずっと多く時間を費やしています。問題は、データをレンダリングするために軸を使ってREST呼び出しを行うことです。ブロック内でレスポンスを処理するために、データを取得することはできますが、 'this'オブジェクトは何らかの理由で正しいオブジェクトを参照できず、エラーが発生します。なぜこれが起きているのですか？それについての助けがあれば、非常に感謝しています。

以下に私のコードスニペットを掲載する。私はAxiosコールスコープの外でこのコンテキストを保存しようとしましたが、新しい変数を使用しましたが、それも役に立ちません。また

this.state = { 
    allRoutes: {}, 
    selectedRoutes: {} 
}; 

：ここで私は私のコンソールで取得エラーが

TypeError: _this2.setState is not a function

import React, {Component} from 'react'; 

import axios from 'axios'; 

import './RouteList.css'; 

class RouteList extends Component{ 
constructor(){ 
    super();   
    this.setState = { 
     allRoutes: {}, 
     selectedRoutes: {} 
    }; 
    }  

componentDidMount(){ 
    const that = this; 
    //Retrieve the SF-Muni route list   
    axios.get('http://webservices.nextbus.com/service/publicJSONFeed?command=routeList&a=sf-muni') 
     .then(response => { 
      console.log(response); 
      that.setState({ allRoutes: response.data.routes }); 
     }) 
     .catch((error) => { 
      console.log(error); 
     });    
} 

render(){ 
    return (
     <div className="transit-routes"> 
      {/*TODO-Code to render data.*/} 
     </div> 
    ); 
} 
} 
export default RouteList;` 

Answer 1

問題は、あなたは、コンストラクタでsetStateメソッドを上書きしていることを、次のように初期状態を設定しようとしているあります矢印関数を使用する場合、親スコープを保存する必要はなく、関数は外部関数と同じスコープで実行されます。