顺序异步函数

Question

试图用异步等待依次更新我的状态。第一个状态函数在下一个函数运行之前不会更新状态，该功能取决于第一个函数的状态更改。

我已经尝试过承诺和异步等待，但是第一个状态功能不会在下一个功能之前进行更新。

let setAudio = () => {
    return new Promise(resolve => {
      if(state.currentTrackIndex === null) {
        setState(state=>({...state, audioPlayer: new Audio()}))
        setTimeout(() => {
            resolve('done');
        }, 1000);
      } else {
        setState(state=>({...state}))
        setTimeout(() => {
            resolve('done');
        }, 1000);
      }
    })
  }
  let setTrack = (index) => {
    return new Promise(resolve => {
      if (index === state.currentTrackIndex) {
        togglePlay();
        setTimeout(() => {
            resolve('done');
        }, 1000);
      } else {
        state.audioPlayer.pause()
        state.audioPlayer = new Audio(state.tracks[index].file);
        state.audioPlayer.play();
        setState(state => ({ ...state, currentTrackIndex: index, isPlaying: true }));
        setTimeout(() => {
            resolve('done');
        }, 1000);
      }
    })
  }
  async function playTrack(index){
    try {
      let result1 = await setAudio()
      let result2 = await setTrack(index)
      return result2;
    }
    catch(error){
      console.log(error)
    }
  }

setaudio：我首先在state.audioplayer中检查一个音频对象。如果当前的状态.currentTrackIndex为null(启动音乐播放器之前是默认值(，我希望在state.audioplayer中使用音频对象更新状态。如果目前存在一个对象，我将保留状态。原因是：该应用程序是用gatsbyjs制作的，因此在初始状态下设置音频对象将不起作用，需要先渲染组件。

setTrack：如果我单击当前轨道，则应暂停音频播放器，如果我单击另一个轨道，则应首先暂停音频对象，然后用新的音频对象填充，然后播放新音频。除了设置新的CurrentTrackIndex。

PlayTrack：此处的目标是顺序运行代码，首先检查音频对象，然后播放正确的音频。

Answer 1

1. 不要直接修改this.state。例如，您可能需要重构此行：

   state.audioPlayer = new Audio(state.tracks[index].file);
   

   尝试使用this.setState()。https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly

2. 您知道this.setState完成执行的唯一时间是您提供this.setState的第二个参数。与其使用1000ms超时后解决的承诺，不如为this.setState提供第二个论点来解决您的任何问题吗？还是您想尝试按照文档建议将一些逻辑放入componentDidMount()中？https://reactjs.org/docs/reaect-component.html#settate