顺序异步函数答案

【问题标题】：Sequential async functions顺序异步函数
【发布时间】：2019-05-04 00:37:48
【问题描述】：

尝试使用异步等待顺序更新我的状态。第一个状态函数在下一个函数运行之前不会更新状态，这取决于第一个函数的状态变化。

promise 和 async await 我都试过了，但是第一个状态函数不会在下一个函数之前更新。

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 中的音频对象。如果当前 state.currentTrackIndex 为 null（这是启动音乐播放器之前的默认值），我希望使用 state.audioPlayer 中的音频对象更新状态。如果当前存在一个对象，我会保留该状态。原因：应用是用 GatsbyJS 做的，所以在初始状态下设置音频对象是行不通的，需要先渲染组件。

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

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

【问题讨论】：

标签： javascript reactjs ecmascript-6 async-await react-hooks

【解决方案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
您知道this.setState 完成执行的唯一时间是在您提供this.setState 的第二个参数中。不是使用在 1000 毫秒超时后解决的 Promises，而是向 this.setState 提供第二个参数是否有助于解决您的任何问题？或者您是否想按照文档的建议尝试将您的一些逻辑放在componentDidMount() 中？ https://reactjs.org/docs/react-component.html#setstate

【讨论】：