'this.setState'で何が問題なのですか？

Question

私の反応クラスでこの問題があります。自分の状態を更新しようとしていますが、このエラーが発生します。 "未定義のsetState 'プロパティを読み取れません。オンラインすべてのソリューションを試してみましたが、運、ここ

はコード

export default class PageBackground extends Component{ 
    constructor(props) { 
      super(props); 

      this.state={ 
       lat   :'nothing', 
       longi  :'' 
      }; 
      this.getLocation=this.getLocation.bind(this); 
      } 


     componentWillMount() { 
      this.getLocation(); 
     } 
     getLocation() { 

      fetch('http://freegeoip.net/json/') 
      .then((res)=>res.json()) 
      .then(function (objec){this.setState({lat:objec.latitude,longi:objec.longitude});}) 
      .catch((err)=>console.log("didn't connect to App",err)) 
      console.log(this.state.lat) 
     } 

     render(){ 
      return(
       <p>{this.state.lat}</p> 
       ) 
      } 
     } 

Answer 1

function() { ... }構文は文脈からthisの参照を維持しないであろうではありませんしています。代わりに矢印の機能を使用します。

then(() => { 
    this.setState({lat: objec.latitude, longi: objec.longitude}) 
}) 

別のオプションは、function() { }後.bind(this)を追加することです。

それとも、単にローカル変数にthisを保存し、関数内でそれを使用する：

var self = this; 
fetch('http://freegeoip.net/json/') 
     .then((res)=>res.json()) 
     .then(function (objec){self.setState({lat:objec.latitude,longi:objec.longitude});}) 
     .catch((err)=>console.log("didn't connect to App",err)) 
     console.log(this.state.lat) 

ただし、矢印の機能はこの種の問題のために正確に導入されました。

Answer 2

これを試してみてください：

getLocation() { 
      var self = this; 
      fetch('http://freegeoip.net/json/') 
      .then(function (objec) { 
       console.log(objec); 
       self.setState({lat: objec.latitude, longi: objec.longitude}) 
      }) 
      .catch(function (error) { 
       console.log(error); 
      }); 
     } 

Answer 3

ここで問題となっている、あなたは別のスコープでthisをaccesssしようとしています。

function() {}をコールバックとして渡すたびに、それ自身の有効範囲が作成されます。 代わりに矢印関数を使用します。

() => { 'your code here'; } 

矢印機能は、その親のスコープを共有します。

getLocation =() => { 
    fetch('https://freegeoip.net/json/') 
     .then(res => res.json()) 
     .then((objec) => { 
      this.setState({ lat: objec.latitude, longi: objec.longitude }); 
     }) 
     .catch(err => console.log("didn't connect to App", err)); 
    console.log(this.state.lat); 
}