Forcing mounting & unmounting Gantt in react using key

Hi,

I’m trying to force react component unmount and remount using key based on instructions in https://docs.dhtmlx.com/gantt/desktop__multiple_gantts.html and Issue reloading new tasks in Gantt even using destructor and am getting a lot of errors.

What I’ve done is start with react-gantt-demo on github and update it so that:

  1. it is loading Pro version of Gantt instead of npm version
  2. mount and unmount are creating/destroying Gantt instances (see changes to Gantt.js below)
  3. App component changs key whenever logDataUpdate is called (see changes to App.js below)

The resulting of errors are below (the Uncaught TypeError: Cannot read property 'tasksStore' of undefined continues to get called several times a second for as long as I leave the window open):

I suspect that part of the solution may be to sometimes reload the tasks instead of unmounting and remounting the component, but I also want to have confidence that mount and unmount will work smoothly when users navigate away from the Gantt view and then return later so I’d like to understand how to avoid these errors.

Thanks!

e.

Resulting errors

Uncaught TypeError: e._sendTaskOrder is not a function
    at Object.<anonymous> (dhtmlxgantt.js?v=6.1.7:10)
    at Object.i (dhtmlxgantt.js?v=6.1.7:10)
    at Object.t.callEvent (dhtmlxgantt.js?v=6.1.7:10)
    at o.<anonymous> (dhtmlxgantt.js?v=6.1.7:10)
    at o.i (dhtmlxgantt.js?v=6.1.7:10)
    at o.t.callEvent (dhtmlxgantt.js?v=6.1.7:10)
    at o.updateItem (dhtmlxgantt.js?v=6.1.7:10)
    at Object.updateTask (dhtmlxgantt.js?v=6.1.7:10)
    at Object._finalize_mouse_up (dhtmlxgantt.js?v=6.1.7:10)
    at Object.on_mouse_up (dhtmlxgantt.js?v=6.1.7:10)
    at Object.<anonymous> (dhtmlxgantt.js?v=6.1.7:10)
Uncaught (in promise) TypeError: Cannot read property 'getUserData' of undefined
    at t.setUpdated (dhtmlxgantt.js?v=6.1.7:10)
    at t.afterUpdateCallback (dhtmlxgantt.js?v=6.1.7:10)
    at h (dhtmlxgantt.js?v=6.1.7:10)
Uncaught TypeError: Cannot read property 'tasksStore' of undefined
    at Object.method (dhtmlxgantt.js?v=6.1.7:10)
    at Object.getState (dhtmlxgantt.js?v=6.1.7:10)
    at h (dhtmlxgantt.js?v=6.1.7:10)
    at p (dhtmlxgantt.js?v=6.1.7:10)

Changes to Gantt.js to create & destroy Gantt instances

  componentDidMount() {
    console.log("innitializing new Gantt Instance")
    this.gantt = window.Gantt.getGanttInstance();
    this.gantt.config.xml_date = "%Y-%m-%d %H:%i";
    const { tasks } = this.props;
    this.gantt.init(this.ganttContainer);
    this.initGanttDataProcessor();
    this.gantt.parse(tasks);
  }

  componentWillUnmount() {
    this.gantt.destructor(); 
    this.gantt = null;
    if (this.dataProcessor) {
      this.dataProcessor.destructor();
      this.dataProcessor = null;
    }
  }

Changes to App.js to force mount/remount using a key

//...
class App extends Component {
  state = {
    currentZoom: 'Days',
    messages: [],
    remountKey: 1,    // Key value in state
  };

  addMessage(message) {
    // ...
    // change this.state.remountKey on every save
    const milliseconds = Date.now();
    this.setState({ messages, remountKey:milliseconds });
  }

  // ...
  render() {
    const { currentZoom, messages } = this.state;
    return (
      <div>
        <div className="zoom-bar">
          ...
        </div>
        <div className="gantt-container">
          <Gantt
            key = {this.state.remountKey} // Key forces remount
            tasks={data}
            zoom={currentZoom}
            onDataUpdated={this.logDataUpdate}
          />
        </div>
        <MessageArea
          messages={messages}
        />
      </div>
    );
  }
}

export default App;

Hello Elijah,
Thank you for reporting about the issue.
It happens because Gantt doesn’t expect to be destroyed when a task is dragged - that’s why it throws errors.
We added a few checks to fix the issue, and the fix will be included in future versions.

1 Like

Hello Elijah,
The issue should be fixed in the 6.2.x version:
https://docs.dhtmlx.com/gantt/whatsnew.html#62

1 Like

Hello! I’m having the same exact problem. Whenever I apply new changes to the component where the Gantt Chart is rendered, I’m getting this error of Cannot read property ‘tasksStore’ of undefined. To make a change a select another page, make the changes in the code and then after they were applied, i move to the page where Gantt chart is displayed. I’m using the pro version 7.0.9

Hello Patricio,
We received your request in the support system. Let’s continue our discussion there.