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:
- it is loading Pro version of Gantt instead of npm version
- mount and unmount are creating/destroying Gantt instances (see changes to Gantt.js below)
- 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;