Воспроизведение аудио-файлов, зависящих от состояния, в React

Question

Я пытаюсь создать в React новый зависящий от состояния экземпляр Audio. При использовании require () я получаю предупреждение «Критическая зависимость: запрос зависимости является выражением». Я не могу просто импортировать файл, поскольку источник аудио зависит от состояния. Как я могу обойти это?

Следующий код выдает ошибку:

playSong = () => {
    this.setState(this.state, function(){
    let source = require(this.state.songList[this.state.songIndex].src);
    let audio = new Audio(source);
    audio.play();
    });
}

Функция require () работает только в том случае, если дан литерал.

Answer 1

К сожалению, вы не можете require динамические значения.

Сначала вы можете статически импортировать все ваши файлы в массив songList и выбрать из них правильный:

const songList = [
  require('./path/to/song1.mp3'),
  require('./path/to/song2.mp3')
];

class MyComponent extends React.Component {
  playSong = () => {
    let source = songList[this.state.songIndex].src;
    let audio = new Audio(source);
    audio.play();
  };

  render () {
    // ...
  }
}