嘿，伙计们，我想改变一下const TEMPLATE = [template] 动态使用<InnerBlocks template={TEMPLATE} /> 组成部分基于切换，我想删除我的“核心/图像”块。我试图用state创建它，并在切换模板和列时设置它们的状态。Gutenberg给出了块类型“r”无法识别的错误。

我的索引。块的js文件可以在这里找到

const { __ } = wp.i18n;
import \'./styles/editor.scss\'
import \'./styles/style.scss\'
import edit from \'./edit\';
import save from \'./save\';

/**
 * Register block
 */

export const name = \'toolbox/three-cta\';

export const settings = {
    title: __("Three CTA Block"),
    description: __("Display CTA block"),
    category: "widget",
    icon: "awards",
    attributes: {
        paragraph: {
            type: \'string\',
            default: \'\',
            source: \'html\',
            selector: \'p\'
        },
        heading: {
            type: \'string\',
            source: \'html\',
            selector: \'h2\'
        },
        cards: {
            type: \'number\',
            default: 0,
        },
        toggleImg: {
            type: \'boolean\',
            default: false,
        }
    },
    edit,
    save,
}

import { InnerBlocks, InspectorControls } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import { PanelBody, PanelRow, RangeControl, ToggleControl } from "@wordpress/components";
import { useDispatch, useSelect } from "@wordpress/data";
import { createBlock } from "@wordpress/blocks";
import { useState } from "@wordpress/element";
const { times } = lodash;


// const TEMPLATE = [
// The template that should be reproduced. Based on the toggle  [ "core/image", {} ], should be removed
//  [ \'core/heading\', { placeholder: \'Three CTA Block\' } ],
//  [ \'core/columns\', {}, [
//      [ \'core/column\', {}, [
//          [ "core/image", {} ],
//          [ "core/heading", { placeholder: __( "Toolbox CTA" ) } ],
//          [ "core/paragraph", { placeholder: "CTA Description" } ],
//          [ "core/button", { placeholder: "Call to Action" } ],
//      ]
//      ],
//      [ \'core/column\', {}, [
//          [ "core/image", {} ],
//          [ "core/heading", { placeholder: __( "Toolbox CTA" ) } ],
//          [ "core/paragraph", { placeholder: "CTA Description" } ],
//          [ "core/button", { placeholder: "Call to Action" } ],
//      ]
//      ],
//      [ \'core/column\', {}, [
//          [ "core/image", {} ],
//          [ "core/heading", { placeholder: __( "Toolbox CTA" ) } ],
//          [ "core/paragraph", { placeholder: "CTA Description" } ],
//          [ "core/button", { placeholder: "Call to Action" } ]
//      ]
//      ],
//  ]
//  ] ];

export default function edit( props ) {
    const { className, attributes, setAttributes, clientId } = props;

    // code for the rangeControl Innerblocks doesnt affect the code (if not clicked on the rangeControls)
    const { replaceInnerBlocks } = useDispatch( "core/block-editor" );
    let { inner_blocks } = useSelect( select => ( {
        inner_blocks: select( "core/block-editor" ).getBlocks( clientId )
    } ) );

    let [column, setColumn] = useState([ \'core/column\', {}, [
        [ "core/heading", { placeholder: __( "PLACEHOLDER" ) } ],
        [ "core/paragraph", { placeholder: "CTA P" } ],
        [ "core/button", { placeholder: "CTA Button" } ],
    ]])


    const [template, setTemplate] = useState([
        ["core/heading", { placeholder: "Three CTA Block" }],
        ["core/columns", {}, [...column]],
    ])



    const toggleChange = (value) => {
        setAttributes({ toggleImg: value })
        // const newColumn = column += [\'core/column\', {}, [["core/image", {}],]];
        const newColumn = [ \'core/column\', {}, [
            [ "core/image", {} ],
            [ "core/heading", { placeholder: __( "Toolbox CTA" ) } ],
            [ "core/paragraph", { placeholder: "CTA Description" } ],
            [ "core/button", { placeholder: "Call to Action" } ],
        ]]

        setColumn(newColumn);
        setTemplate([
            ["core/heading", { placeholder: "Three CTA Block" }],
            ["core/columns", {}, [...newColumn]],
        ])

    }

    const getInspector = () => {
        return (
                <InspectorControls>
                    <PanelBody
                            title="Add columns"
                            initalOpen={true}
                    >
                        <PanelRow>
                            <RangeControl
                                    label="columns"
                                    value={attributes.cards}
                                    min={0}
                                    max={3}
                                    onChange={count => {
                                        let new_innerblocks = inner_blocks
                                        if ( attributes.cards < count ) {
                                            new_innerblocks = [
                                                ...inner_blocks,
                                                ...times( count - attributes.cards, () =>
                                                        createBlock( "toolbox/three-cta" )
                                                )
                                            ];
                                        } else if ( attributes.cards > count ) {
                                            inner_blocks = inner_blocks.slice( 0, count )
                                        }
                                        replaceInnerBlocks( clientId, new_innerblocks, false );
                                    }}
                            />
                        </PanelRow>
                        <PanelRow>
                            <ToggleControl
                                    label="Toggle me"
                                    checked={attributes.toggleImg}
                                    onChange={(value) => toggleChange(value)}
                            />
                        </PanelRow>
                    </PanelBody>
                </InspectorControls>
        )
    }

    return (
            <>
                {getInspector()}
                <div className={className}>
                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossOrigin="anonymous"/>
                    <div className="grid-x">
                        <div className="cell small-12">
                            <InnerBlocks template={template} templateLock="true"/>
                        </div>
                    </div>
                </div>
            </>
    );
}