react 中关于生命周期请教

[e2e]

///这边 我一在页面加载的时候就通过监听 redux 里面正在播放的歌曲, 每次歌曲发生变化的时候 也会获取他 //的 id 然后重新修改页面, 但是每次切换歌曲的时候他总是不能及时切换, 比如你正在放歌曲 A 现在要换 B 那么他会从你点击时候起放 1 秒左右的 A 在切换到 B

const currentMusic = useSelector(state => state.audioData.currentMusic) as ListItem; //获取正在播放的歌曲
useEffect(() => {
    dispatch(isPlaying(false))
    setCurrentMusic(currenrMusicState)
    const id = currentMusic.id;
    const songsid = currentMusic.id;
    const params = {
      id,
      cookie
    };
    if(id) {
      dispatch(musicDetailPage({ songsid })); //获取歌曲信息
      dispatch(songsState(id)) //获取音乐状态
      setMusicFalg(true)
      if(cookie){
        dispatch(recommedUserListDataState(params));
      }
      //讲正在播放的歌曲添加到历史播放
      const copyHistoryList = [...historyList];
      const index = copyHistoryList.findIndex(item => item.id === id);
      if(index !== -1) {
        const song = { ...copyHistoryList[index] };
        copyHistoryList.splice(index, 1);
        copyHistoryList.unshift(song);
      } else {
        const copyList = JSON.parse(JSON.stringify(currentMusic));
        copyHistoryList.unshift(copyList);
      }
      dispatch(songHistoryListData(copyHistoryList));
    }
    console.log(currentMusic);
  }, [currentMusic]);

  const historyList = useSelector(state => state.audioData.songHistoryList) || []
  const handleEnded = () => {
    if(currentSongsIndex < historyList.length) {
      setCurrentSongsIndex(currentSongsIndex + 1)
      dispatch(currentMusicData(historyList[currentSongsIndex]))
      if(audioRef.current) {
        audioRef.current.play()
      }
    }else {
      setCurrentSongsIndex(0)
      dispatch(currentMusicData(historyList[currentSongsIndex]));
      if(audioRef.current) {
        audioRef.current.play()
      }
    }
  };

还有一个就是下面这段代码 我在监听到歌曲播放完毕以后想让他自动切换到下一首，但是他在播放完了之后会一直停在这个这一首上面，我重新刷新进入页面以后他才会吗正确的渲染historyList里面的下一首歌曲