Hello,
I am using Paramquery 3.5.1 (the 'pqgridf' NPM package) in a new React app, created by 'create-react-app'. This is my Paramquery component, according to the docs, slightly modified to accomodate for data coming via props and not being local:
mport React, { Component } from 'react';
import pq from 'pqgridf';
class TableEditor extends Component {
gridref = React.createRef();
componentDidMount() {
this.options = this.props.grid;
this.grid = pq.grid(this.gridref.current, this.options);
}
componentDidUpdate(prevProps) {
console.log("Updating grid: ", this.options);
this.options = Object.assign({}, this.options, this.props.grid); // completely replace this.options
this.grid.refreshDataAndView();
}
render() {
return <div id="grid" ref={this.gridref}></div>
};
}
export default TableEditor;
The component is called by the parent component in this way:
<TableEditor grid={this.state.grid} />
When `this.state.grid` changes, the TableEditor component is re-rendered, and `this.props.grid` inside the TableEditor component has the correct values, but the PQ grid shows no data, it's empty, despite `this.grid.refreshDataAndView();` in the `componentDidUpdate()` call. I can see the console output with the updated data, but the grid doesn't update. This doesn't even work when calling `pq.grid(...)` again in the `componentdidUpdate()` method, the grid is always empty.
But when my editor autosaves a change *after* loading the grid, and the webpack webserver then refreshes the browser, *then* my data appears. So I'm guessing this is a timing issue or a race condition, but I can't find the root cause.
How does PQgrid detect changed data or options when using React, what am I missing?
Do I actually *need* React to re-render the PQ grid when data changes, or can PQ handle this on its own?
Thank you!
