当父级状态更新时，子级道具将不

Question

从子组件 PlaylistSpotify 我可以更新状态 localPlaylist 的问题，那么问题是 PlaylistSpotify Props won't update with the new results.I've been stuck for a while and if anyone could explain me what I'm missing doing wrong that would be really appreciated.

我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说，我是说。

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

你参考的是 this.state.localPlaylists 对于 playlistLists 档次 PlaylistSpotify 组成部分

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

Answer 2

它看起来像在函数getLocalPlaylists 你永远不更新 localPlaylists 在状态。你正在更新 playlistLists然而，你是通过 localPlaylists 到子组件 localPlaylist. 我不知道这是否是故意的。但由于你从不更新 localPlaylists，孩子永远不会被更新。

Answer 3

在你的 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但它在任何地方都没有被使用。