Question

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

我已经尝试了Promise和async等待，但是第一个状态功能不会在下一个功能之前更新。

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

请勿直接修改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第二个参数。不是使用在1000ms超时后解决的Promises，而是向this.setState提供第二个参数可以解决您的任何问题？还是您想尝试将某些逻辑放入componentDidMount()中，而不是按照文档中的建议？ https://reactjs.org/docs/react-component.html#setstate

顺序异步功能

1 个答案: