Added logic to saveNew function in masterState.ts that ensures all components saved in componentActionsRecord point to components that are rendered in the DOM. Solves the problem of attempting to setState on unmounted components after returning to a route that had been navigated away from.

Co-authored-by: Chris LeBrett <100822842+fscgolden@users.noreply.github.com>
Co-authored-by: Robby Tipton <100332566+RobbyTipton@users.noreply.github.com>
Co-authored-by: Joseph Park <10874783+joeepark@users.noreply.github.com>
Co-authored-by: David Kim <101825171+codejunkie7@users.noreply.github.com>
Co-authored-by: Kevin HoEun Lee <14950124+khobread@users.noreply.github.com>

Author: 5 people

src/backend/masterState.ts

@@ -19,22 +19,37 @@ const componentActionsRecord: HookStates = [];
 let index = 0;
 
 export default {
-  //adds new component to ComponentActionsRecord
+  // adds new component to ComponentActionsRecord
   saveNew: (state, component): number => {
     componentActionsRecord[index] = { state, component };
+    console.log('entire record of components is', [...componentActionsRecord]);
     index++;
+
+    for (let i = 0; i < componentActionsRecord.length - 2; i++) {
+      if (
+        componentActionsRecord[i].component.constructor.name ===
+        component.constructor.name
+      ) {
+        console.log('reassigning componentActionsRecord at index', i);
+        componentActionsRecord[i] = { state, component };
+      }
+    }
+
     return index - 1;
   },
-  getRecordByIndex: (inputIndex: number): HookStateItem => componentActionsRecord[inputIndex],
-  //this is used for class components - inputIndex will always be a fixed number (coming in timeJump.ts)
-  getComponentByIndex: (inputIndex: number): any => (componentActionsRecord[inputIndex]
-    ? componentActionsRecord[inputIndex].component
-    : undefined),
-    //this is used for react hooks - hooks will be passed in as an array from timeJump.ts
+  getRecordByIndex: (inputIndex: number): HookStateItem =>
+    componentActionsRecord[inputIndex],
+  // this is used for class components - inputIndex will always be a fixed number (coming in timeJump.ts)
+  getComponentByIndex: (inputIndex: number): any =>
+    componentActionsRecord[inputIndex]
+      ? componentActionsRecord[inputIndex].component
+      : undefined,
+  // this is used for react hooks - hooks will be passed in as an array from timeJump.ts
   getComponentByIndexHooks: (inputIndex: Array<number> = []): any => {
     const multiDispatch = [];
     for (let i = 0; i < inputIndex.length; i++) {
-      if (componentActionsRecord[inputIndex[i]]) multiDispatch.push(componentActionsRecord[inputIndex[i]].component);
+      if (componentActionsRecord[inputIndex[i]])
+        multiDispatch.push(componentActionsRecord[inputIndex[i]].component);
     }
     return multiDispatch;
   },