#reactjs #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
};
Комментарии:
1. Большое вам спасибо! это действительно помогает