在 ReactJS 中获取请求

Question

我正在为我正在使用的 class 开发一个小型应用程序，但在使用提取 API

时遇到问题

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      map: "",
      markers: [],
      Data: []
    };
  }

  componentDidMount() {
    fetch(
      `https://api.foursquare.com/v2/venues/explore?near=ashkelon&v=20180729&client_id=MVLZGLPIAITJITM0OOFYER3C2ZRT5ERGGEWCC0T1YWV3HFZA&client_secret=1TBLTY0TSM1T320FEO3BJBGTMYVQPCMBOGO5GEBC0ZB1E5LK`
    )
      .then(function(response) {
        return response.json();
      })
      .then(
        function(data) {
          this.setState({ Data: data });
        }.bind(this)
      )
      .catch(function(e) {
        console.log("There is an issue with getting the information", e);
      });
  }
}

window.initMap = this.initMap;
loadJS("https://maps.googleapis.com/maps/api/js?key=AIzaSyDySeqpuOjQlckWJUMlbSW_w5CydOVTWJI&callback=initMap");

更新：这不会提供错误并且状态已设置，但现在发生的是当我在 initMap 方法中记录状态时我的状态为空。

此时我看到状态设置为 "that"。但是，如果它设置为 "that" 我如何在我的应用程序的其余部分使用 "this" 状态我需要此信息来在 google 地图上创建标记 API

提前致谢。

Answer 1

问题是 this 在您的匿名函数中未定义。通过分配 const that = this，您可以使来自 componentDidMount() 的上下文在所有匿名函数中可用。另一种解决方案是 bind() 所有具有正确上下文的函数。例如

...
.then((function(data) {
    this.setState({Data: data.response.groups[0]})
    console.log(this.state.Data);
}).bind(this))
...

现在您可以删除 that 的声明。

Answer 2

如果您真的不关心 IE11 support (and does not use Babel) please consider using arrow functions（它是函数的语法糖，它们具有与周围的 this 相同的 this）

请注意 string literals like you used, have similar compatibility table as arrow functions 所以您不会有任何损失并获得更清晰的代码！

带有箭头函数的代码如下所示：

componentDidMount() {
   /* ... */

   fetch(`URL`)
      .then(response => response.json())
      .then(data => this.setState({Data: data.response.groups[0]}))
      .catch(e => console.log('There is an issue with getting the information' , e))

   /* ... */
}

在 ReactJS 中获取请求

Fetch requests in ReactJS

javascript

reactjs

fetch-api