ReactJS 中的范围和 OOP 问题答案

【问题标题】：Issues with scope and OOP in ReactJSReactJS 中的范围和 OOP 问题
【发布时间】：2020-05-09 14:31:08
【问题描述】：

我最近一直在使用 Spotify API 使用 reactJS 和 JS，并且遇到了一些问题，当我尝试从另一个函数调用一个函数时，我得到错误 this is not defined，指的是关键字 this .我对 JS 中的 OOP 不太熟悉，所以我认为它与那个或范围有关，但我不知道如何解决它。我附上了下面从我的 app.js 中获取的代码。

getPlaylistTracks(tracksURL) {
    spotifyApi.getPlaylist(tracksURL).then(
      function (data) {
        console.log(data);
      },
      function (err) {
        console.error(err);
      }
    );
  }

  getPlaylists() {
    spotifyApi.getUserPlaylists().then(
        function (data) {
          var playlistArray = [];
          for(let i = 0; i < data.items.length; i++) {
            var tracksURL = data.items[i].tracks.href.slice(37,59);
            var playlist = new PlaylistObj(data.items[i].name, data.items[i].tracks.total, tracksURL);
            this.getPlaylistTracks(tracksURL);
            playlistArray[i] = playlist;

          }
          return playlistArray;
        },
        function (err) {
          console.error(err);
        }
    );
  }

该函数在 render() 中被调用，我得到的错误消息是。未处理的拒绝（TypeError）：这是未定义的

谢谢。

【问题讨论】：

标签： javascript reactjs oop

【解决方案1】：

在使用 function 关键字定义的 JavaScript 函数中，会丢失 this 的值。有多种方法可以解决此问题，例如使用中间变量或使用bind，但全球公认的解决方案是改用ES6 arrow functions。

getPlaylists() {
  spotifyApi.getUserPlaylists().then(data => {
    // ...
  },
  err => {
    console.error(err);
  });
}

箭头函数是 ECMAScript 2015 中添加的最强大和最知名的功能之一，所以我相信您应该查看一些文章，例如 this one。

【讨论】：