Последовательные асинхронные функции - PullRequest
Новая
       15

Последовательные асинхронные функции

0 голосов
/ 04 мая 2019

Попытка обновить мое состояние последовательно с помощью асинхронного ожидания. Функция первого состояния не обновляет состояние до запуска следующей функции, что зависит от изменения состояния первой функции.

Я пробовал оба обещания и асинхронное ожидание, но первая функция состояния не будет обновляться до следующей функции. 

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 равно нулю (это значение по умолчанию перед запуском музыкального проигрывателя), я хочу обновить состояние с помощью аудиообъекта в state.audioPlayer. Если в данный момент существует объект, я сохраняю состояние. Причина этого: приложение создано с помощью GatsbyJS, поэтому установка аудиообъекта в исходное состояние не будет работать, компоненты должны быть отрисованы в первую очередь.

setTrack: если я щелкаю по текущей дорожке, она должна приостанавливать работу аудиопроигрывателя; если я щелкаю по другой дорожке, аудиообъект должен сначала приостановиться, затем заполниться новым аудиообъектом и затем воспроизвести новое аудио. В дополнение к установке нового currentTrackIndex.

playTrack: Целью здесь является последовательное выполнение кода, сначала проверяя аудиообъект, а затем воспроизводя правильное аудио.

1 Ответ

1 голос
/ 04 мая 2019

  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 мс, помогает ли 2-й аргумент this.setState помочь в решении ваших проблем?Или вы хотите попробовать вместо логики добавить componentDidMount() в соответствии с документацией?https://reactjs.org/docs/react-component.html#setstate

...