block editor – Why am I getting the error: Cannot update a component (`Unknown`) while rendering a different component (`Edit`)?

Question

I recently upgraded to WordPress 5.9, and I’m now getting the following error in a custom block: Cannot update a component (`Unknown`) while rendering a different component (`Edit`). The code is as below:

export default function Edit( props ) {

    const {attributes, setAttributes} = props
    const {customClass, summaryCount} = attributes
    const childBlockCount = useSelect(select => select('core/block-editor')).getBlockCount(props.clientId))

    const ALLOWED_BLOCKS = [
        ...
    ]

    function Placeholder() {
        return <div className="event-summary-placeholder"></div>
    }

    useEffect(() => {
        if (childBlockCount !== summaryCount)
            setAttributes({summaryCount: childBlockCount})
    }, [childBlockCount])

    const blockProps = useBlockProps({})

    const innerBlocksProps = useInnerBlocksProps(blockProps, {
        allowedBlocks: ALLOWED_BLOCKS,
        templateLock: false
    })

    return (
        <aside className="event-aside column-side">
            <dl {...useBlockProps({ className: `${customClass} type-s` })}>
                {summaryCount === 0 && <Placeholder/>}
                {innerBlocksProps.children}
            </dl>
        </aside>
    )
}

Most solutions I’ve found so far recommend using useEffect in some way, but I’m not sure how that would apply here. What’s causing this error?

0
verism 2 years 2022-05-20T06:29:04-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse