ReactJS:Uncaught TypeError:无法读取未定义的属性“setState”

Question

我目前正在尝试在reactJS中构建一个小型天气应用程序（freecodecamp的应用程序）

目前我收到错误：“UncaughtTypeError:无法读取未定义的属性'setState'”

以下是代码笔的链接：http://codepen.io/rasmus/pen/aNGRJm

下面是代码，我想这就是问题所在：

  componentDidMount: () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        $.ajax({
          url: URL + "lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&APPID=" + APIKEY,
          success: (data) => {
            this.setState({data: data})
          }
        });
      })   
    }
  },

url不是问题所在。我可以将接收到的数据记录到控制台。

我想这是因为这个的范围。。

有什么想法吗？

编辑：我不认为这是重复的，因为我只使用了箭头函数，而它们使.bind（this）过时了

Answer 1

尝试在componentDidMount中使用如下箭头函数：

componentDidMount = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        let self = this;
        $.ajax({
          url: URL + "lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&APPID=" + APIKEY,
          success: (data) => {
            self.setState({data: data})
          }
        });
      })   
    }
}

您需要在API调用之外缓存对此的引用。arrow函数为您绑定了它，因此您可以在函数中访问它，并且它仍然指向组件。

Answer 2

ajax函数中的回调不是从函数中调用的，因此this没有指向您期望的对象，即您的类。

保存一个参考并从那里使用它：

componentDidMount: () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        let self = this;
        $.ajax({
          url: URL + "lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&APPID=" + APIKEY,
          success: (data) => {
            self.setState({data: data})
          }
        });
      })   
    }
  },