xplato / useUndoable

↪ React hook for undo/redo functionality (with batteries included)
MIT License
168 stars 7 forks source link

Error: Converting Circular Structure to JSON #22

Closed rohaldb closed 1 year ago

rohaldb commented 1 year ago

I'm unable to set the state of a deeply nested object. I get this error:

helpers.js:112 Uncaught TypeError: Converting circular structure to JSON --> starting at object with constructor 'Object' | property 'fixtureRowProducts' -> object with constructor 'Array' | index 0 -> object with constructor 'Object' --- property 'fixtureRow' closes the circle at JSON.stringify () at mutate (index.modern.js:72:1) at Object.update (index.modern.js:144:1) at reducer (index.modern.js:179:1) at updateReducer (react-dom.development.js:16664:1) at Object.useReducer (react-dom.development.js:17898:1) at useReducer (react.development.js:1626:1) at useUndoable (index.modern.js:203:31) at FixtureEdit ([id].tsx:193:54) at renderWithHooks (react-dom.development.js:16305:1) at updateFunctionComponent (react-dom.development.js:19588:1) at beginWork (react-dom.development.js:21601:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at HTMLUnknownElement.sentryWrapped (helpers.js:90:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1) at renderRootSync (react-dom.development.js:26434:1) at performSyncWorkOnRoot (react-dom.development.js:26085:1) at flushSyncCallbacks (react-dom.development.js:12042:1) at eval (react-dom.development.js:25651:1)

I am using it like this:

  const [fixtureGroup, setFixtureGroup] = useUndoable<
    FixtureGroupEntity | undefined
  >(undefined);

Initial value is undefined due to handling async, similar to your use case for resetInitialState.

In my case the FixtureGroupEntity is a deeply nested object.

Any ideas?