Running into a '__resizeListeners__' of un

Question

I am using Semantic-UI accordion for the Segment react component that is wrapped around an eCharts line plot (using echarts-for-react). I currently have a button that allows me to collapse the line plot, as seen in the "collapsed" variable.

I also have a button that allows me to change the size of the component from half screen to full screen.

The problem is when the component is already "collapsed" and I trigger the resize from half screen to full screen then "uncollapse" the component, the chart does not resize to the new container size.

Uncaught TypeError: Cannot read property 'resizeListeners' of undefined

The resize does work when the line plot is not collapsed though.

class PlotSegmentsList extends Component {
   //no life cycle methods yet
  render() {
    const state = store.getState();
    const view = state.fullOrHalfScreen;

    const activeCategory = this.props.categories.find(p => p.category === this.props.Id);
    const activePlotsArray = activeCategory.plots;

    const plotsList = activePlotsArray.map((p) => (
      <div key={p.titles.main} className='column'>
       <Segment 
        legend={p.legend} 
        plotTitles={p.titles} 
      />
       <div className="ui divider"></div>
      </div>      
      )
    );

    return (
      <div className={view === 'half' ? "ui two column grid" : "ui one column grid"}> 
        {plotsList}
      </div>
    )
  }
}

class Segment extends Component {

  render () {    
    const state = store.getState();
    const collapsed = state.collapseOrUncollapseAll;

    return (
      <div>
        <div className="ui fluid accordion">
          <div className="title active">
            <i className="dropdown icon"></i>
              {this.props.plotTitles.main} 
          </div>
          <div className={collapsed? "content active" : "content hidden"}>
            <Toolbar plot_ID={this.props.plotTitles.main}/>
            <Plot 
              data={this.props.data}
              legend={this.props.names}
              plotType='line'
              plotTitles={this.props.plotTitles}
            />
          </div>
        </div>
      </div>

class Plot extends React.Component {

I have tried to add event listeners to Plot in the components lifeCycle methods but I am pretty new to react and redux and unsure how to properly update this components size if it is collapsed in the accordion. Any suggestions on this problem and using react life cycle methods with redux would be great! Thank you

Answer 1

I am the author of echarts-for-react.

Upgrade to the latest version of package, can solve the problem above by switching element-size-listener to size-sensor.