试图使Spotify应用程序的克隆在localhost中出现错误：3000 TYPEERROR：无法读取未定义的属性“ url”

如何解决试图使Spotify应用程序的克隆在localhost中出现错误：3000 TYPEERROR：无法读取未定义的属性“ url”

我第一次使用stackoverflow，我不知道它的规则和规定，因此我为自己的任何错误表示歉意。

我正在尝试克隆带有响应的Spotify。虽然我所做的一切都很好，但是完成编码后，我在localhost：3000中发现了一个错误 {TypeError：无法读取未定义的属性'url'}

我必须在这些行中找到错误，但没有找到。

App.js

import React,{ useEffect } from "react";
import SpotifyWebApi from "spotify-web-api-js";
import { useStateValue } from "./StateProvider";
import Player from "./Player";
import { getTokenFromresponse } from "./spotify";
import "./App.css";
import Login from "./Login";

const s = new SpotifyWebApi();

function App() {
  const [{ token },dispatch] = useStateValue();

  useEffect(() => {
    // Set token
    const hash = getTokenFromresponse();
    window.location.hash = "";
    let _token = hash.access_token;

    if (_token) {
      s.setAccesstoken(_token);

      dispatch({
        type: "SET_TOKEN",token: _token,});

      s.getPlaylist("37i9dQZEVXcJZyENowUFo7").then((response) =>
        dispatch({
          type: "SET_disCOVER_WEEKLY",discover_weekly: response,})
      );

      s.getMyTopArtists().then((response) =>
        dispatch({
          type: "SET_TOP_ARTISTS",top_artists: response,})
      );

      dispatch({
        type: "SET_SPOTIFY",spotify: s,});

      s.getMe().then((user) => {
        dispatch({
          type: "SET_USER",user,});
      });

      s.getUserPlaylists().then((playlists) => {
        dispatch({
          type: "SET_PLAYLISTS",playlists,});
      });
    }
  },[token,dispatch]);

  return (
    <div className="app">
      {!token && <Login />}
      {token && <Player spotify={s} />}
    </div>
  );
}

export default App;

Header.js

import React from "react";
import "./Header.css";
import { useStateValue } from "./StateProvider";
import { Avatar } from "@material-ui/core";
import SearchIcon from "@material-ui/icons/Search";
import { useEffect } from "react";

function Header({ spotify }) {
  const [{ user },dispatch] = useStateValue();

  return (
    <div className="header">
      <div className="header__left">
        <SearchIcon />
        <input
          placeholder="Search for Artists,Songs,or podcasts "
          type="text"
        />
      </div>
      <div className="header__right">
        <Avatar alt={user?.display_name} src={user?.images[0].url} />
        <h4>{user?.display_name}</h4>
      </div>
    </div>
  );
}

export default Header;

导出默认应用；

解决方法

从 App.js 文件中，您忘记在从减速器分派期间添加操作。

您的代码段

s.getMe().then((user) => {
        dispatch({
          type: "SET_USER",user,});
      });

      s.getUserPlaylists().then((playlists) => {
        dispatch({
          type: "SET_PLAYLISTS",playlists,});
      });

建议的解决方案

s.getMe().then((user) => {
        dispatch({
          type: "SET_USER",user: user,playlists: playlists,});
      });

希望它能解决您的问题。