Error Destroying FeatureTable instance during React cleanup action

445
0
07-26-2022 01:22 AM
WongChunKang
New Contributor III

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;

 

0 Replies