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

我有两个屏幕，第一个屏幕上有所有播放列表“Playlists”，当我点击其中任何一个屏幕时，我导航到第二个屏幕“playlist details”，其中包含该播放列表上的所有歌曲“它是从第一个屏幕传来的”

因此，在播放列表详细信息屏幕中，我有一个歌曲列表，并且我创建了一个功能来删除这首歌曲“向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}
  />
...
}
}

类播放列表详细信息扩展组件{
建造师（道具）{
超级（道具）；
此.state={
...
播放歌曲：props.navigation.state.params.playlishongs，
所有歌曲：[]，
...
};
}
//从特定播放列表中删除歌曲
removeSongFromPlaylist=异步（曲目id，播放id）=>{
试一试{
const{token}=this.state；
让AuthStr=`Bearer${token}`；
常量头={
“内容类型”：“应用程序/json”，
授权：AuthStr，
};
让响应=等待API.post(
“/my_play_list_track_delete”，
{tracks\u id:track\u id，myplaylist\u id:playListID}，
{headers}，
);
让消息=response.data.data；
警报（信息）；
}捕捉（错误）{
控制台日志（err）；
}
};
render（）{
....
song.id.toString（）}
removeClippedSubviews={false}
contentContainerStyle={{flexGrow:1}
extraData={this.state}
renderItem={this.\u renderSongs}
/>
...
}
}

---

解决问题如果道具或状态发生变化，屏幕将重新播放。从播放列表中删除歌曲时，还应通过从状态中删除歌曲或重新蚀刻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);
    }
  };

---

如果道具或状态发生变化，屏幕将重新播放。从播放列表中删除歌曲时，还应通过从状态中删除歌曲或重新蚀刻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);
    }
  };

你有两种方法：

1-第一个是更新歌曲列表的状态（称为乐观更新），而不实际等待API请求完成，这对用户体验更好（无加载指标）

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

您有两种方法：

1-第一个是更新歌曲列表的状态（称为乐观更新），而不实际等待API请求完成，这对用户体验更好（无加载指标）

2-第二个是在等待API调用删除歌曲后重新获取歌曲