javascript - 顺序异步函数

Question

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

我尝试了 Promise 和 async wait，但第一个状态函数不会在下一个函数之前更新。

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:这里的目标是按顺序运行代码，首先检查音频对象，然后播放正确的音频。

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