調用請求后如何重新渲染屏幕？

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調用后重新獲取歌曲。