Question

我有两个屏幕，第一个屏幕上显示所有播放列表“播放列表”，当我单击其中的任意一个时，我导航到第二个屏幕“播放列表详细信息”，其中包含该播放列表上的所有歌曲“第一个屏幕”。

因此，在播放列表详细信息屏幕中，我有一个歌曲列表，当我执行删除该歌曲的功能时，“向API发送请求”。

所以我的问题是删除其中的一首歌曲后如何重新渲染播放列表详细信息屏幕？

播放列表详细信息屏幕

class PlaylistDetails extends Component {

  constructor(props) {
    super(props);
    this.state = {
      ...
      playListSongs: props.navigation.state.params.playListSongs,
      All_tunes: [],
      ...
    };
  }


 // Remove song from a specific playlist
  removeSongFromPlaylist = async (track_id, playListID) => {
    try {
      const {token} = this.state;
      let AuthStr = `Bearer ${token}`;
      const headers = {
        'Content-Type': 'application/json',
        Authorization: AuthStr,
      };
      let response = await API.post(
        '/my_play_list_track_delete',
        {tracks_id: track_id, myplaylist_id: playListID},
        {headers},
      );
      let message = response.data.data;
      alert(message);
    } catch (err) {
      console.log(err);
    }
  };



render(){

....
  <FlatList
      data={this.state.playListSongs}
      keyExtractor={(song, index) => song.id.toString()}
      removeClippedSubviews={false}
      contentContainerStyle={{flexGrow: 1}}
      extraData={this.state}
      renderItem={this._renderSongs}
  />
...
}
}

解决?‍♂️

我只是在提交问题后才解决它?因此，我从播放列表中删除了歌曲后更新了状态，“ 无论如何感谢mosmk和brycelikesdogs ”

removeSongFromPlaylist = async (track_id, playListID) => {
...

 this.setState({
        playListSongs: this.state.playListSongs.filter(
          item => item.track.id !== track_id,
        ),
      });
...

}

Answer 1

如果道具或状态更改，屏幕将重新呈现。从播放列表中删除歌曲时，您还应该通过从状态中删除歌曲或重新获取api数据来更新状态。

// Remove song from a specific playlist
  removeSongFromPlaylist = async (track_id, playListID) => {
    try {
      const {token} = this.state;
      let AuthStr = `Bearer ${token}`;
      const headers = {
        'Content-Type': 'application/json',
        Authorization: AuthStr,
      };
      let response = await API.post(
        '/my_play_list_track_delete',
        {tracks_id: track_id, myplaylist_id: playListID},
        {headers},
      );
      let message = response.data.data;
      // update your state here to remove the track
      alert(message);
    } catch (err) {
      console.log(err);
    }
  };

Answer 2

您有两种方法：

1-第一种方法是在不实际等待API请求完成的情况下更新歌曲列表的状态（称为乐观更新），这对于用户体验更好（无加载指示器）。

2-第二种是在等待API删除歌曲后重新获取歌曲。

调用请求后如何重新渲染屏幕？

2 个答案: