In my React app development, I encountered the following error when destroying the FeatureTable instance as a cleanup action. Any recommendation is appreciated.
Uncaught TypeError: Cannot set properties of null (setting 'selectedItems')
at l11._clearSelection (Grid.js:959:7594)
at l11.clearSelection (Grid.js:959:3594)
at l11.clearSelection (FeatureTableViewModel.js:5:3924)
at l11.destroy (FeatureTable.js:5:3158)
at l11.value (subclass.js:5:998)
at App.jsx:38:20
at safelyCallDestroy (react-dom.development.js:22932:5)
at commitHookEffectListUnmount (react-dom.development.js:23100:11)
at invokePassiveEffectUnmountInDEV (react-dom.development.js:25207:13)
at invokeEffectsInDev (react-dom.development.js:27351:11)
You may refer to the React app source code below:
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
import Map from "@arcgis/core/Map";
import Mapview from "@arcgis/core/views/MapView";
import FeatureTable from "@arcgis/core/widgets/FeatureTable";
import { useEffect, useRef } from "react";
import "./App.css";
function App() {
const viewRef = useRef();
const tableRef = useRef();
useEffect(() => {
const featureLayer = new FeatureLayer({
url: "https://services2.arcgis.com/GrCObcYo81O3Ymu8/arcgis/rest/services/HDB_Car_Park_Location/FeatureServer/0",
outFields: ["*"],
});
const map = new Map({
basemap: "topo-vector",
layers: [featureLayer],
});
const view = new Mapview({
container: viewRef.current,
map,
center: [103.78, 1.34],
zoom: 11,
});
const featureTable = new FeatureTable({
view,
layer: featureLayer,
container: tableRef.current,
editingEnabled: true,
});
return () => {
featureTable.destroy();
view.destroy();
};
}, []);
return (
<div className="App">
<div id="viewDiv" ref={viewRef}></div>
<div id="tableDiv" ref={tableRef}></div>
</div>
);
}
export default App;