未捕获（承诺）的DOMException无法处理数小时

Question

我正在尝试使用动态导入来制作架子鼓套件，但是动态导入会返回一个承诺。我正在将音频字符串从容器组件发送到DrumKit.js。我尝试了解决此问题的所有解决方案，但我无法解决。 / p>

import '../styles/DrumKit.css'
import React from 'react'
class DrumKit extends React.Component{
  constructor(props){
    super(props);
    this.playSound=this.playSound.bind(this);//We need different methods 
    for each of drumkits.
    this.endSound=this.endSound.bind(this);
    this.state={
        playing:false,
        className:'simpleButton',

    };
    window.addEventListener('keydown',this.playSound);
    this.audio=new Audio(import(`../sounds/${this.props.audio}.wav`));

   }
   endSound(){
    this.setState({
        playing:false
    })
   }
   playSound(event){
    if(event.keyCode===this.props.code||event.type==='click') {
        if(this.audio!==undefined){
            this.audio.play()
        }
    }
    else{
        return ;
    }
    this.setState({
        playing:true
    });
   }
     render(){
      const playing=this.state.playing? "isRinging" : "";
    return (
          <div>
            <button
                 onTransitionEnd={this.endSo"und}
                 className={this.state.className}
                 id={playing}
                 onClick={this.playSound}>
                <kbd>{this.props.letter}</kbd>
                <span className='sound'>{this.props.ring}</span>
            </button>
        </div>
    )
}

} 导出默认的DrumKit;

     index.js:1509 Uncaught Error: The error you provided does not contain 
     a stack trace.
     at B (index.js:1509)
     at G (index.js:1816)
     at index.js:1831
     at index.js:1850
     at index.js:1343
     B @ index.js:1509
     G @ index.js:1816
     (anonymous) @ index.js:1831
     (anonymous) @ index.js:1850
     (anonymous) @ index.js:1343

DrumKit.js：25未捕获（承诺）的DOMException