Javascript 当父状态更新时,子道具将不会
通过子组件playlispotify,我可以更新其父组件的状态localPlaylist。 问题是播放列表Spotify道具不会随着新结果更新。 我已经被困了一段时间,如果有人能解释我错过了什么/做错了什么,我将不胜感激 App.jsJavascript 当父状态更新时,子道具将不会,javascript,reactjs,components,react-props,react-state,Javascript,Reactjs,Components,React Props,React State,通过子组件playlispotify,我可以更新其父组件的状态localPlaylist。 问题是播放列表Spotify道具不会随着新结果更新。 我已经被困了一段时间,如果有人能解释我错过了什么/做错了什么,我将不胜感激 App.js import React from "react"; import SearchBar from "../SearchBar/SearchBar"; import SearchResults from "../SearchResults/SearchResult
import React from "react";
import SearchBar from "../SearchBar/SearchBar";
import SearchResults from "../SearchResults/SearchResults";
import Playlist from "../Playlist/Playlist";
import Spotify from "../../util/Spotify";
import PlaylistSpotify from "../PlaylistSpotify/PlaylistSpotify";
import "./App.css";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
searchInput: "",
searchResults: [],
playlistName: "New Playlist",
playlistTracks: [],
localPlaylists: [],
};
this.addTrack = this.addTrack.bind(this);
this.removeTrack = this.removeTrack.bind(this);
this.updatePlaylistName = this.updatePlaylistName.bind(this);
this.savePlaylist = this.savePlaylist.bind(this);
this.search = this.search.bind(this);
this.getLocalPlaylists = this.getLocalPlaylists.bind(this);
}
addTrack(track) {
let newPlaylist = this.state.playlistTracks;
if (newPlaylist.find((playTrack) => playTrack.id === track.id)) {
return;
} else {
newPlaylist.push(track);
}
this.setState({ playlistTracks: newPlaylist });
}
removeTrack(track) {
let playlist = this.state.playlistTracks;
let newPlaylist = playlist.filter((playTrack) => playTrack.id !== track.id);
this.setState({ playlistTracks: newPlaylist });
}
updatePlaylistName(name) {
this.setState({ playlistName: name });
}
savePlaylist() {
const trackUris = this.state.playlistTracks.map((track) => track.uri);
Spotify.savePlaylist(this.state.playlistName, trackUris).then(() => {
this.setState({
playlistName: "New Playlist",
playlistTracks: [],
});
});
}
// keep search after url updated
componentDidMount() {
Spotify.getAccessToken();
}
getLocalPlaylists() {
Spotify.getPlaylist().then((playlistLists) => {
let newList = playlistLists.items.map((playlist) => {
return {
name: playlist.name,
id: playlist.id,
};
});
this.setState({ playlistLists: newList });
});
}
search(term) {
Spotify.search(term).then((searchResults) => {
// filters results in order not to show tracks already in the playlist
searchResults = searchResults.filter((track) => {
return this.state.playlistTracks.every((el) => el.uri !== track.uri);
});
this.setState({ searchResults: searchResults, searchInput: term });
});
}
render() {
return (
<div>
<h1>
Ja<span className="highlight">mmm</span>ing
</h1>
<div className="App">
{<SearchBar onSearch={this.search} />}
<div className="App-playlist">
{
<SearchResults
searchResults={this.state.searchResults}
onAdd={this.addTrack}
/>
}
{
<Playlist
playlistName={this.state.playlistName}
playlistTracks={this.state.playlistTracks}
onRemove={this.removeTrack}
onNameChange={this.updatePlaylistName}
onSave={this.savePlaylist}
/>
}
{
<PlaylistSpotify
getLocalPlaylists={this.getLocalPlaylists}
playlistLists={this.state.localPlaylists}
/>
}
</div>
</div>
</div>
);
}
}
export default App;
播放点播
import React from "react";
import SingleCurPlaylist from "../SingleCurPlaylist/SingleCurPlaylist";
import "./PlaylistSpotify.css";
class PlaylistSpotify extends React.Component {
constructor(props) {
super(props);
this.renderList = this.renderList.bind(this);
}
renderList() {
this.props.getLocalPlaylists();
}
render() {
return (
<div className="PlaylistSpotify">
<h2>Local Playlists</h2>
<button className="Playlist-save" onClick={this.renderList}>
Get your local playlist
</button>
{this.props.playlistLists.map((singlePlay) => (
<SingleCurPlaylist name={singlePlay.name}/>
))}
</div>
);
}
}
export default PlaylistSpotify;
在App.js中,您不使用this.state.playlists
您正在更新this.state.playlists,但它不在任何地方使用。在您的App.js中,您不使用this.state.playlists
您正在更新this.state.playlists,但它没有在任何地方使用。在函数GetLocalPlaylists中,您似乎从未在状态下更新localPlaylists。您正在更新播放列表,但正在将localPlaylist传递给子组件localPlaylist。我不确定这是否是有意的。但是,由于您从不更新localPlaylists,因此子项永远不会得到更新。在函数GetLocalPlaylists中,您似乎从未在状态下更新localPlaylists。您正在更新播放列表,但正在将localPlaylist传递给子组件localPlaylist。我不确定这是否是有意的。但是,由于您从不更新localPlaylists,因此子项永远不会更新。您正在为PlaylistSpotify组件中的Playlists属性引用this.state.localPlaylists
<PlaylistSpotify
getLocalPlaylists={this.getLocalPlaylists}
playlistLists={this.state.localPlaylists}
/>
您正在为playlispotify组件中的playlists道具引用this.state.localPlaylists
<PlaylistSpotify
getLocalPlaylists={this.getLocalPlaylists}
playlistLists={this.state.localPlaylists}
/>
getLocalPlaylists() {
Spotify.getPlaylist().then((playlistLists) => {
let newList = playlistLists.items.map((playlist) => {
return {
name: playlist.name,
id: playlist.id,
};
});
// update this to: this.setState({ localPlaylists: newList })
this.setState({ playlistLists: newList });
});
}