当父 state 更新时，子道具不会

Question

从子组件PlaylistSpotify我可以更新其父组件的 state localPlaylist 。 问题是PlaylistSpotify道具不会随着新结果更新。 我已经被困了一段时间，如果有人能向我解释我错过了什么/做错了什么，我将不胜感激。

应用程序.js

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;

播放列表Spotify

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;

Answer 1

看起来在 function getLocalPlaylists中，您永远不会更新localPlaylists中的 localPlaylists。 您正在更新playlistLists ，但是您将localPlaylists传递给子组件localPlaylist 。 我不确定这是否是有意的。 但是由于您从不更新localPlaylists ，因此孩子永远不会更新。

Answer 2

在您的 App.js 中，您不要使用this.state.playlistLists

  getLocalPlaylists() {
    Spotify.getPlaylist().then((playlistLists) => {
      let newList = playlistLists.items.map((playlist) => {
        return {
          name: playlist.name,
          id: playlist.id,
        };
      });
      this.setState({ playlistLists: newList });
    });
  }

您正在更新this.state.playlistLists ，但它没有在任何地方使用。

Answer 3

您正在为PlaylistSpotify组件中的playlistLists属性引用this.state.localPlaylists

<PlaylistSpotify
  getLocalPlaylists={this.getLocalPlaylists}
  playlistLists={this.state.localPlaylists}
/>

...但是，在您的回调中，您正在更新playlistLists

  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 });
    });
  }