Javascript 加载编辑器时，WP Blocks save函数与edit函数不匹配

我正在基于开发一个WP Gutenberg块，我遇到了一个问题，即加载时保存的内容与编辑器不匹配，因此我看到一个错误“此块包含意外或无效内容”

我尝试过在浏览器控制台中查看，但我无法找出差异所在，编辑和保存功能都引用了图像，但它们没有被保存功能存储

值得注意的是，一旦第一次加载、使用块并保存帖子，它就可以在前端正常工作。当你回到编辑器时，它就不再工作了

import './__block__.view.scss';
import './__block__.editor.scss';

const {
    registerBlockType,
    getBlockDefaultClassName
} = wp.blocks;

const { 
    InspectorControls,
    MediaUpload
} = wp.editor;

const {
    Button
} = wp.components;

registerBlockType('__namespace__/__block__', {
    title: '__prettyname__(noCase)',
    icon: '__icon__',
    category: '__category__',

    attributes: {
        imgUrl: {
            type: 'array',
            source: 'children',
            selector: 'img',
        },
    },

    edit({ attributes, className, setAttributes }) {

        //Destructuring the images array attribute
        const {images = []} = attributes;

        // This removes an image from the gallery
        const removeImage = (removeImage) => {
            //filter the images
            const newImages = images.filter( (image) => {
                //If the current image is equal to removeImage the image will be returnd
                if(image.id != removeImage.id) {
                    return image;
                }
            });

            //Saves the new state
            setAttributes({
                images:newImages,
            })
        }

        //Displays the images
        const displayImages = (images) => {
            return (
                //Loops throug the images
                images.map( (image) => {
                    return (
                    <div className="gallery-item-container">
                            <img className='gallery-item' src={image.url} key={ images.id } />
                            <div className='remove-item' onClick={() => removeImage(image)}><span class="dashicons dashicons-trash"></span></div>
                            <div className='caption-text'>{image.caption[0]}</div>
                    </div>
                    )
                })

            )
        }

        //JSX to return
        return (
            <div>
                <MediaUpload
                    onSelect={(media) => {setAttributes({images: [...images, ...media]});}}
                    type="image"
                    multiple={true}
                    value={images}
                    render={({open}) => (
                        <Button className="select-images-button is-button is-default is-large" onClick={open}>
                            Add images
                        </Button>
                    )}
                />
                <br />
                <div class="modal__img">
                    <div class="flexslider">
                        <ul class="slides" data-total-slides={images.length}>{ displayImages(images) }</ul>
                    </div>
                </div>
            </div>
        );
    },

    save({attributes}) {
        // Destructuring the images array attribute
        const { images = [] } = attributes;

        // Displays the images
        const displayImages = (images) => {
            return (
                images.map( (image,index) => {
                    return (
                            <li><img
                                className='lazy'
                                key={images.id}
                                data-src={image.url}
                                data-slide-no={index}
                                data-caption={image.caption[0]}
                                alt={image.alt}
                                /></li>
                    )
                })
            )
        }

        //JSX to return
        return (
            <div class="modal__img">
                <div class="flexslider">
                    <ul class="slides" data-total-slides={images.length}>{ displayImages(images) }</ul>
                </div>
            </div>
        );

    },
});

我希望块返回编辑器时输出原始HTML，但这种行为不起作用。

尝试在编辑和保存函数中传递道具而不是属性，然后简单地使用

var attributes = props.attributes;

---

有关更多参考信息，请阅读其中的代码。

在“保存”和“编辑”功能中，您正在引用属性属性属性中的图像。然而，当您注册块并设置属性时，您只有imageUrl作为属性。这意味着图像永远不会存储在数据库中，当您返回编辑时图像也不存在

将图像添加为属性应该可以解决此问题

你有什么

attributes: {
    imgUrl: {
        type: 'array',
        source: 'children',
        selector: 'img',
    },
},

应该是什么

attributes: {
    images: {
        type: 'array',
        default: []
    },
},

---

您需要确保save函数返回的HTML结构与save函数保存到数据库的HTML结构相同。比较这两个版本有助于我找到类似的错误，并使用该网站进行比较