reactjs - 使用状态更改以编程方式更新 react-wavesurfer 区域

Question

当道具发生变化时，我无法重新渲染这些区域。这是一个简单的例子：

var React = require('react');
import { connect } from 'react-redux';
import WaveSurfer from 'react-wavesurfer';
window.WaveSurfer = require('wavesurfer.js');
let Regions = require('./Regions').default;

class SongCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      playing: false,
      pos: 0,
      regions: {
        eoi: {
          id: 'eoi',
          start: 5,
          end: 6
        }
      }
    };
    this.togglePlay = this.togglePlay.bind(this);
    this.handleTogglePlayClick = this.handleTogglePlayClick.bind(this);
    this.handlePosChange = this.handlePosChange.bind(this);
    this.handleMoveRegionsClick = this.handleMoveRegionsClick.bind(this);
  }
  togglePlay() {
    this.setState({
      playing: !this.state.playing
    });
  }
  handleTogglePlayClick() {
    this.togglePlay();
  }
  handlePosChange({ wavesurfer, originalArgs}) {
    this.setState({
      pos: originalArgs[0]
    })
  }
  handleMoveRegionsClick() {
    const newState = Object.assign({}, this.state, {
      regions: {
        eoi: {
          start: this.state.regions.eoi.start+10,
          end: this.state.regions.eoi.end+10,
          id: 'eoi'
        }
      }
    });
    this.setState(newState);
  }
  render () {
    return (
        <div>
          <div>
            <button type="button" className="btn btn-primary btn-xs" onClick={this.handleMoveRegionsClick}>Change Region</button>
          </div>
          <WaveSurfer
            audioFile={'https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3'}
            pos={this.state.pos}
            onPosChange={this.handlePosChange}
            playing={this.state.playing}
          >
            <Regions regions={this.state.regions} />
          </WaveSurfer>
        </div>
      );
  }
};


export default SongCard;

当我在 handleMoveRegionsClick() 中调用 setState() 时，SongCard 的状态会更新，但不会触发 Region 道具的重新加载。

谁能指出我如何解决这个问题的正确方向？谢谢！

Answer 1

以防万一这有助于某人：事实证明，wavesurfer.js 将 shouldComponentRender() 覆盖为 false，这会阻止区域移动。现在，我不得不分叉 react-wavesurfer 并删除覆盖。