this is my source..
when i debugged,
pq.grid(this.gridRef.current, this.options);
==> <breakpoint>
==> render first : show the ui with the data nomally
==> render second ==> occur error
<package>
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jquery": "^3.5.16",
"@types/jqueryui": "^1.12.16",
"jquery": "^3.7.0",
"jquery-ui-pack": "^1.13.3",
"jszip": "2.5.0",
"pqgrid": "^9.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-pro-sidebar": "^1.1.0-alpha.1",
"react-router-dom": "^6.14.2",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
},
<Option>
this.rGridCol = [
{dataIndx: 'pq_tree_cb',width:100,hidden: true},
{dataIndx: 'name',width:200,title: 'Name'},
{dataIndx: 'size',title: 'Size',width:100,dataType: 'float'},
{dataIndx: 'date', title: 'Modified Date',width:100, dataType: 'date' }
];
this.rGridOption = {
showTitle:false,
reactive:true,
locale:'en',
animModel:{on:true},
collapsible: { toggled: true },
rowHt:24,
height:'400',
columnTemplate:{ width:100 },
treeModel: {
dataIndx: 'name',
cascade: true
},
colModel: this.rGridCol,
dataModel: { data: data}
};
<error detail>
Download the React DevTools for a better development experience:
https://reactjs.org/link/react-devtoolsUncaught Error use treeOption() to set treeModel options.
at <anonymous> (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:22839:1)
at callCallback (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:4164:1)
at invokeGuardedCallbackDev (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:4213:1)
at invokeGuardedCallback (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:4277:1)
at reportUncaughtErrorInDEV (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:22838:1)
at captureCommitPhaseError (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:27126:1)
at invokeLayoutEffectMountInDEV (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:25135:1)
at invokeEffectsInDev (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:27351:1)
at commitDoubleInvokeEffectsInDEV (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:27327:1)
at commitRootImpl (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:26883:1)
at commitRoot (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:26682:1)
at finishConcurrentRender (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:25981:1)
at performConcurrentWorkOnRoot (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:25809:1)
at workLoop (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\scheduler\cjs\scheduler.development.js:266:1)
at flushWork (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\scheduler\cjs\scheduler.development.js:239:1)
at performWorkUntilDeadline (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\scheduler\cjs\scheduler.development.js:533:1)
--- postMessage ---
at schedulePerformWorkUntilDeadline (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\scheduler\cjs\scheduler.development.js:574:1)
at requestHostCallback (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\scheduler\cjs\scheduler.development.js:588:1)
at unstable_scheduleCallback (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\scheduler\cjs\scheduler.development.js:441:1)
at scheduleCallback$1 (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:27537:1)
at ensureRootIsScheduled (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:25683:1)
at scheduleUpdateOnFiber (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:25531:1)
at updateContainer (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:28858:1)
at ReactDOMHydrationRoot.render.ReactDOMRoot.render (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\node_modules\react-dom\cjs\react-dom.development.js:29314:1)
at ./src/index.js (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\src\index.js:8:1)
at options.factory (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\webpack\runtime\react refresh:6:1)
at __webpack_require__ (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\webpack\bootstrap:24:1)
at <anonymous> (c:\02_EAGLEPLUS_SRC_NODE_PRE\06_react\react-person\react-node\webpack\startup:7:1)
at <anonymous> (localhost��3000/static/js/bundle.js:97448:12)
The above error occurred in the <PqGrid> component:
at PqGrid (
http://localhost:3000/static/js/bundle.js:101:5)
at div
at App (
http://localhost:3000/static/js/bundle.js:123:5)