古登堡阻挡错误：列表中的每个孩子都应该有一个唯一的“关键”道具

时间：2020-03-12 作者：muya.dev

我正在学习在WordPress中构建自定义Gutenberg块，因为reactjs对我来说是一种新语言，我希望能对下面的错误提供一些帮助。这是控制台中的警告

Warning: Each child in a list should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.
    in edit (created by Edit)
    in Edit (created by WithToolbarControls(Edit))
下面是一个屏幕截图。

enter image description here

我的Gutenberg javascript代码如下

const { registerBlockType } = wp.blocks;

registerBlockType(\'gutenberg-mwako/section\', {

    title: \'Section\',

    category: \'layout\',

    attributes: {},

    edit() {
        return([
            <section>
                <div className="container">
                    <h2>Title here</h2>
                </div>
            </section>
        ])
    },

    save() {
        return(
            <section>
                <div className="container">
                    <h2>Title here</h2>
                </div>
            </section>
        )
    }
});

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

您需要提供key 对于section 您的edit() 函数（返回元素数组）：

edit() {
    return([
        <section key="my-key">
            <div className="container">
                <h2>Title here</h2>
            </div>
        </section>
    ])
},

标签： plugin-development   theme-development   block-editor   小码农  

相关推荐