keystatic
keystatic copied to clipboard
setState infinite loop on deep nested arrays
I've encountered the following error when editing a singleton with deep nested arrays:
Unhandled Runtime Error
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.
How to replicate: This error only occurs when I'm three nested arrays deep and I add a new item, click Done and then re-enter the second array item and try to add a new item to the third array.
Here's a Loom video demonstrating the issue
Here's my singleton schema (simplified):
menus: singleton({
label: "Menus",
path: "content/menus/",
schema: {
title: fields.text({
label: "Title",
}),
menus: fields.array(
fields.object({
title: fields.text({
label: "Title",
}),
description: fields.text({
label: "Description",
multiline: true,
}),
menuSections: fields.array(
fields.object({
title: fields.text({
label: "Title",
}),
menuItems: fields.array(
fields.object({
title: fields.text({
label: "Title",
}),
description: fields.text({
label: "Description",
multiline: true,
}),
}),
{
label: "Menu Items",
itemLabel: (props) => props.fields.title.value,
}
),
}),
{
label: "Menu Sections",
itemLabel: (props) => props.fields.title.value,
}
),
}),
{
label: "Menus",
itemLabel: (props) => props.fields.title.value,
}
),
},
})