React window.addeventlistener不起作用

Question

我正在尝试将Spotify身份验证添加到单页应用程序。

这是我的按钮单击处理程序事件。

 var CLIENT_ID = '****';
  var REDIRECT_URI = window.location.href;
  function getLoginURL(scopes) {
    return 'https://accounts.spotify.com/authorize?client_id=' + CLIENT_ID +
      '&redirect_uri=' + encodeURIComponent(REDIRECT_URI) +
      '&scope=' + encodeURIComponent(scopes.join(' ')) +
      '&response_type=token';
  }
  var url = getLoginURL([
    'user-read-email',
    'user-read-birthdate',
    'user-read-private',
    'user-library-modify',
    'user-library-read',
    'user-follow-read',
    'user-follow-modify',
    'streaming',
    'playlist-modify-private',
    'playlist-modify-public',
    'playlist-read-collaborative',
    'playlist-read-private'
  ]);

  var width = 450,
    height = 730,
    left = (window.screen.width / 2) - (width / 2),
    top = (window.screen.height / 2) - (height / 2);


  window.open(url,
    'Spotify',
    'menubar=no,location=no,resizable=no,scrollbars=no,status=no, width=' + width + ', height=' + height + ', top=' + top + ', left=' + left
  );

  console.log("window is open");

  });

执行身份验证时将可以正常工作window.addEventListener（'message'）

这里是事件侦听器：

 componentDidMount() {
window.addEventListener('message', (event) => {
  ***console.log("Spotify Window sent event data.");
  var hash = JSON.parse(event.data);
  if (hash.type == 'access_token') {
    console.log(hash.access_token);
  }
}); }

但是它不起作用。这里的问题在哪里？标有***的部分甚至无效。

通过我使用本文档的方式：http://jsfiddle.net/JMPerez/62wafrm7/

Answer 1

[由于Spotify正在重定向回到您的页面，因此，在挂载组件之前会触发该事件，这意味着该窗口没有在监听它。

[我会考虑将您的window.addEventListener()代码移到任何组件之外的index.js文件中。