'this.setState'有什么问题

请问我的反应类，我试图更新我的状态，但我得到这个错误“无法读取属性setState的未定义”..我已经尝试每一个解决方案在线，但没有运气'this.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> 
       ) 
      } 
     }

来源

2017-10-17 John Anisere

您是否获得控制台日志？ – buoyantair

我认为'this'是在函数的上下文中。也许你应该尝试'that = this'和'that.setState' – AnkitG

有litterally一百万重复这个非常错误。我很惊讶你没能找到他们中的任何一个。 – Chris

的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)

然而，箭头功能都是一模一样介绍了这样那样的问题。

来源

2017-10-17 10:49:49 Sulthan

非常感谢你。这工作，但我想知道为什么？我阅读箭头功能不能很好地与'这'''为什么这种情况不同？ –

为什么我们甚至必须绑定我们在构造函数中创建的es6类中的所有方法？ –

@JohnAnisere第一个问题的答案是箭头函数从周围的代码中捕获'this'，因此您不必手动将'this'绑定到它们。他们以你期望的方式工作。另一个问题更复杂。当类方法用作“松散”（第一类）函数时，您正在讨论这个问题。这些方法不会自动绑定到它们的实例，而必须手动绑定。 – Sulthan

尝试了这一点：

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

来源

2017-10-17 10:57:12

这里的问题是，你想在不同的范围accesss this。

每当我们通过一个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); 
}

来源

2017-10-17 10:57:39

非常感谢你.. –

'this.setState'有什么问题

回答

相关问题