Spotify 隐式流教程，token 为空

Question

这里的新开发人员试图创建一个 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 && (
  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("&")
  .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 && (
        <a
          className="btn btn--loginApp-link"
          href={`${authUrl}client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes.join("%20")}&response_type=token&show_dialog=true`}
        >
          Login to Spotify
        </a>
      )}
      {this.state.token && (
        console.log("hello")
      )}
      </div>
    );
  }
}

export default Landing;

谁能把我推向正确的方向？

Answer 1

您收到错误的原因是未定义初始状态值。所以 react 将 this.state 设置为 null，因此你会得到错误。

如何解决问题？

1. 你在构造函数中设置了默认状态，这样this.state就不是null

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

1. 您检查状态是否不为空（或只是不是假值），然后渲染您需要的内容

{this.state && !this.state.token && (...

从您展示的教程中，您可以看到该人实际上在下一个代码示例中声明了默认状态

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