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
- feat: drop support for multiple editables internally fixes https://github.com/react-page/react-page/issues/888 and second part of https://github.com/react-page/react-page/issues BREAKING CHANGE: the... — committed to react-page/react-page by macrozone 3 years ago
- feat: drop support for multiple editables internally fixes https://github.com/react-page/react-page/issues/888 and second part of https://github.com/react-page/react-page/issues BREAKING CHANGE: the... — committed to react-page/react-page by macrozone 3 years ago
- feat: drop support for multiple editables internally fixes https://github.com/react-page/react-page/issues/888 and second part of https://github.com/react-page/react-page/issues BREAKING CHANGE: the... — committed to react-page/react-page by macrozone 3 years ago
@macrozone I created a public repo https://github.com/zwk5004/react-page-example that reproduces the issue seen in the video.