react-page: Maximum update depth exceeded error

Version: 1.0.0-beta.14

Description: When loading an object from the backend and changing the editor value, it creates this error. Removing the editor allows the page to load normal, eliminating cause coming from anything outside the Editor component. I have provided the component that the Editor is in. Not sure if I have something wrong or if it’s a bug in the 1.0.0 version.

Component:


type PageEditorProps = {
  name: string;
  editorValue: Value;
  setEditorValue: (value: Value) => void;
};

export const PageEditor = ({
  editorValue,
  setEditorValue
}: PageEditorProps): ReactElement => {
  return (
    <div style={{ color: "white", paddingBottom: 10 }}>
      <Editor
        cellPlugins={cellPlugins}
        value={editorValue}
        onChange={setEditorValue}
      />
    </div>
  );
};

Error:

index.js:1 The above error occurred in the <ForwardRef(InputBase)> component:
at InputBase (http://localhost:3000/static/js/7.chunk.js:18959:30)
    at WithStyles(ForwardRef(InputBase)) (http://localhost:3000/static/js/7.chunk.js:43647:31)
    at Input (http://localhost:3000/static/js/7.chunk.js:18364:32)
    at WithStyles(ForwardRef(Input)) (http://localhost:3000/static/js/7.chunk.js:43647:31)
    at div
    at FormControl (http://localhost:3000/static/js/7.chunk.js:15009:24)
    at WithStyles(ForwardRef(FormControl)) (http://localhost:3000/static/js/7.chunk.js:43647:31)
    at TextField (http://localhost:3000/static/js/7.chunk.js:34759:28)
    at WithStyles(ForwardRef(TextField)) (http://localhost:3000/static/js/7.chunk.js:43647:31)
    at div
    at div
    at div
    at ContentEditorContainer (http://localhost:3000/static/js/main.chunk.js:2618:3)
    at Connect(ContentEditorContainer) (http://localhost:3000/static/js/7.chunk.js:123938:75)
    at Route (http://localhost:3000/static/js/7.chunk.js:126837:29)
    at Switch (http://localhost:3000/static/js/7.chunk.js:127039:29)
    at main
    at div
    at AdminContainer (http://localhost:3000/static/js/main.chunk.js:2084:3)
    at Route (http://localhost:3000/static/js/7.chunk.js:126837:29)
    at Switch (http://localhost:3000/static/js/7.chunk.js:127039:29)
    at div
    at Body (http://localhost:3000/static/js/main.chunk.js:3354:18)
    at div
    at Router (http://localhost:3000/static/js/7.chunk.js:126472:30)
    at App
    at ThemeProvider (http://localhost:3000/static/js/7.chunk.js:42351:24)
    at Provider (http://localhost:3000/static/js/7.chunk.js:123651:20)
    at Auth0Provider (http://localhost:3000/static/js/7.chunk.js:3956:23)

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (react-dom.development.js:23803)
    at scheduleUpdateOnFiber (react-dom.development.js:21835)
    at dispatchAction (react-dom.development.js:16139)
    at InputBase.js:427
    at invokePassiveEffectCreate (react-dom.development.js:23487)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at flushPassiveEffectsImpl (react-dom.development.js:23574)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushPassiveEffects (react-dom.development.js:23447)
    at performSyncWorkOnRoot (react-dom.development.js:22269)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at batchedEventUpdates$1 (react-dom.development.js:22403)
    at batchedEventUpdates (react-dom.development.js:3745)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
checkForNestedUpdates @ react-dom.development.js:23803
scheduleUpdateOnFiber @ react-dom.development.js:21835
dispatchAction @ react-dom.development.js:16139
(anonymous) @ InputBase.js:427
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
performSyncWorkOnRoot @ react-dom.development.js:22269
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
batchedEventUpdates$1 @ react-dom.development.js:22403
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924```

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 15

Commits related to this issue

Most upvoted comments

@macrozone I created a public repo https://github.com/zwk5004/react-page-example that reproduces the issue seen in the video.