React-Wavesurfer区域无法渲染

Question

在出现区域出现问题时，我有一个数组，需要将它们加载到“region”对象中，以便它们可以渲染。但即使用1进行测试也不会出现

代码： 进口

import Wavesurfer from 'react-wavesurfer';
import Regions from 'react-wavesurfer/src/plugins/regions';
require('wavesurfer.js');

稍后在代码中

constructor(props) {
    super(props);
    this.state = {
      playing: false,
      pos: 0,
      filterString: '',
      notes : this.props.notes,
      regions: {
        eoi: {
          id: 'eoi',
          start: 5,
          end: 25
        }
      }
    };
    this.handleTogglePlay = this.handleTogglePlay.bind(this);
    this.handlePosChange = this.handlePosChange.bind(this);
  }

最后渲染中的Waveform组件

    <Wavesurfer
      audioFile={audio}
      pos={this.state.pos}
      onPosChange={event => this.handlePosChange(event.originalArgs[0])}
      playing={this.state.playing}
      options={waveOptions}
    >
      <Regions regions={this.state.regions} />

    </Wavesurfer>

目前我只需要一个人工作，我可以从那里去，非常感谢任何可以提供的帮助，请和谢谢