Проблемы с объемом и OOP в ReactJS

Question

В последнее время я играл с reactJS и JS с Spotify API, и у меня возникли некоторые проблемы: когда я пытаюсь вызвать одну функцию из другой, я получаю сообщение об ошибке, это не определено, ссылаясь на к ключевому слову this. Я не слишком знаком с OOP в JS, поэтому я решил, что это как-то связано с этим или с прицелом, но я не могу понять, как это исправить. Я прикрепил приведенный ниже код, взятый из моего приложения. 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): это не определено

Спасибо.

Answer 1

В JavaScript функции, определенные с помощью ключевого слова function, теряют значение this. Есть несколько способов исправить эту проблему, например, использовать промежуточную переменную или использовать bind , но глобальное решение - использовать вместо этого стрелочные функции ES6 .

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

Стрелочные функции - одна из самых мощных и известных функций, добавленных в ECMAScript 2015, поэтому я считаю, что вам следует ознакомиться с некоторыми статьями, такими как эта .