Блог

Главная - Вопросы по программированию - попытка создать клон приложения spotify с ошибкой в localhost: 3000 ОШИБКА типа: не удается прочитать свойство ‘url’ неопределенного

попытка создать клон приложения spotify с ошибкой в localhost: 3000 ОШИБКА типа: не удается прочитать свойство ‘url’ неопределенного

#javascript #css #reactjs

#javascript #css #reactjs

Вопрос:

Я использую stackoverflow впервые, и я не знаю его правил и правил, поэтому приношу извинения за любые мои ошибки.

Я пытаюсь создать клон spotify с помощью react. Пока я делал, все было хорошо, но после завершения кодирования обнаружена ОШИБКА в localhost: 3000 {TypeError: не удается прочитать свойство ‘url’ из undefined}

Ошибка должна быть в этой строке, которую я пытаюсь найти, но я не нашел.

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 amp;amp; <Login />}
      {token amp;amp; <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;

экспортировать приложение по умолчанию;

Ответ №1:

Из 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,
        });
      });

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

Я надеюсь, что это решит вашу проблему.