Руководство по неявному потоку Spotify, токен равен нулю

#reactjs #spotify

Вопрос:

Новый разработчик пытается создать проект поиска spotify, чтобы помочь мне учиться.

Я следую этому руководству, чтобы пользователь мог войти в мое приложение с помощью spotify. https://levelup.gitconnected.com/how-to-build-a-spotify-player-with-react-in-15-minutes-7e01991bc4b6

В настоящее время я застрял в разделе, где спрашивается, где вы создаете кнопку входа. Я следовал примерам кода, но при загрузке страницы я получаю сообщение об ошибке:

 TypeError: Cannot read property 'token' of null
Landing.render
src/components/Landing.js:39
  36 | }
  37 | render() {
  38 |   return (
> 39 |     <div className="Landing">
     | ^  40 |       {!this.state.token amp;amp; (
  41 |       <a
  42 |         className="btn btn--loginApp-link"

Вот как выглядит мой код

 import './Landing.scss';
import React, { Component } from 'react';

export const authUrl = 'https://accounts.spotify.com/authorize';

const clientId = "MY_CLIENT_ID";
const redirectUri = "http://localhost:3000";
const scopes = [
  "user-read-currently-playing",
  "user-read-playback-state",
];

const hash = window.location.hash
  .substring(1)
  .split("amp;")
  .reduce(function (initial, item) {
    if (item) {
      var parts = item.split("=");
      initial[parts[0]] = decodeURIComponent(parts[1]);
    }
    return initial;
  }, {});
window.location.hash = "";

class Landing extends Component {
  componentDidMount() {
    let _token = hash.access_token;
    console.log(_token)
    if (_token) {
      this.setState({
        token: _token
      });
    } else {
      console.log("no token")
    }
  }
  render() {
    return (
      <div className="Landing">
        {!this.state.token amp;amp; (
        <a
          className="btn btn--loginApp-link"
          href={`${authUrl}client_id=${clientId}amp;redirect_uri=${redirectUri}amp;scope=${scopes.join("%20")}amp;response_type=tokenamp;show_dialog=true`}
        >
          Login to Spotify
        </a>
      )}
      {this.state.token amp;amp; (
        console.log("hello")
      )}
      </div>
    );
  }
}

export default Landing;

Кто-нибудь может подтолкнуть меня в правильном направлении?

1. Может показаться, что ваше состояние не задано. Каков вывод из этой строки console.log(_token) ?

2. Он не определен.

3. Да, поэтому состояние не задано. Если _token не определено, то this.setState() никогда не запускается. Я полагаю, тогда вы видите, что «нет токена» печатается?

4. Да, но я не уверен, почему его значение равно нулю. Как я уже сказал, я довольно новичок в программировании. Но я следую этому руководству, о котором я упоминал выше, и, похоже, это именно то, что он установил, поэтому я не уверен, почему я вижу эту ошибку

5. Ну, это потому this.state , что не определено. Если бы вы открыли свою консоль в инструментах разработчика Chrome и ввели this.state.token , вы бы получили точно такую же ошибку, поскольку нет this.state такого невозможного, что есть this.state.token . Вы пробовали удалить if — if (_token) { ?

Ответ №1:

Причина, по которой вы получаете сообщение об ошибке, заключается в том, что значения начального состояния не определены. Поэтому react устанавливает this.state значение null , поэтому вы получаете ошибку.

Как решить проблему?

Вы устанавливаете состояние по умолчанию в конструкторе, этот способ this.state не null

   constructor() {
    super();
    this.state = {
      token: ""
    };
  }

вы проверяете, не является ли состояние null (или просто не является ложным значением), и вы отображаете то, что вам нужно

 {this.state amp;amp; !this.state.token amp;amp; (...

И из показанного вами руководства вы можете видеть, что пользователь фактически объявляет состояние по умолчанию в следующем примере кода

 constructor() {
    super();
    this.state = {
      token: null,
    item: {
      album: {
        images: [{ url: "" }]
      },
      name: "",
      artists: [{ name: "" }],
      duration_ms:0,
    },
    is_playing: "Paused",
    progress_ms: 0
  };