Функция mediaUpload вызывает исключение при вызове в моем личном блоке

Question

Блок работает отлично с кнопкой компонента MediaUpload, но при попытке добавить новое изображение с помощью функции DropZone и вашей функции «addFile» я просто копирую его и вставляю в свой личный код, я получаю эту ошибку:

index.js?ver=1557530583:12 Uncaught (in promise) TypeError: Invalid attempt to spread non-iterable instance
    at index.js?ver=1557530583:12
    at o (index.js?ver=1557530583:12)
    at index.js?ver=1557530583:17
    at tryCatch (wp-polyfill.min.js?ver=7.0.0:3)
    at Generator.invoke [as _invoke] (wp-polyfill.min.js?ver=7.0.0:3)
    at Generator.t.(/wordpress-2/wp-admin/anonymous function) [as next] (http://localhost/wordpress-2/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=7.0.0:3:25481)
    at r (index.js?ver=1557530583:12)
    at c (index.js?ver=1557530583:12)
    at index.js?ver=1557530583:12
    at new Promise (<anonymous>)

Я новичок в WordPress Гутенберге и также реагирую на js. Я пытаюсь создать новый персональный блок, моему блоку нужен раздел, равный блоку Галереи, за исключением того, что при обновлении изображения он должен отображать карусель изображений. .

Это полный код моего блока:

const { MediaUpload } = wp.editor;
const { withState } = wp.compose;
const { Button, DropZone, DropZoneProvider } = wp.components;

wp.blocks.registerBlockType('pannoramo/my-block', {
    title: 'Propriedades',
    icon: 'admin-home',
    category: 'common',
    attributes: {
        images: {
            type: 'array'
        }
    },
    edit: function({attributes, className, setAttributes}) {
        const {mediaUpload} = wp.editor;
        const {images = []} = attributes;
        const {hasDropped} = withState({hasDropped: false});

        const removeImage = (removeImage) => {
            const newImages = images.filter((image) => {
                    if(image.id != removeImage.id){
                        return image;
                    }
            });

            const tagImages = document.getElementsByClassName('carousel-item');
            const lastImage = newImages[newImages.length - 1] || removeImage;
            for (let i = 0; i < tagImages.length; i++) {
                const carouselItem = tagImages[i];
                const img = carouselItem.children[0];

                if(img.getAttribute('id') == lastImage.id) {
                    carouselItem.classList.toggle('active');
                }   
            }

            setAttributes({
                images: newImages,
            })
        }

        const addFiles = ( files ) => {
            const currentImages = attributes.images || [];

            mediaUpload(files, (files) => setAttributes({ images: currentImages.concat( files )}), 'image');
        }

        const displayImages = (images) => {
            return (
                React.createElement("div", {
                    id: "pannoramo-carousel-edit-grid",
                    className: "carousel slide",
                    "data-ride": "carousel"
                    }, React.createElement(wp.components.DropZoneProvider, null, 
                        React.createElement("div", null, hasDropped ? 'Dropped!' : 'Drop something here', 
                        React.createElement(wp.components.DropZone, {
                        onFilesDrop: addFiles,
                        onHTMLDrop: function onHTMLDrop() {
                            return this.setState({
                                hasDropped: true
                            });
                        },
                        onDrop: function onDrop() {
                            return this.setState({
                                hasDropped: true
                            });
                        }
                    }))),
                    React.createElement("ol", {
                    className: "carousel-indicators"
                  }, images.map(function (image, i) {
                    return React.createElement("li", {
                      "data-target": "#pannoramo-carousel-edit-grid",
                      "data-slide-to": i
                    });
                  })), React.createElement("div", {
                    className: "carousel-inner"
                  }, images.map(function (image, i) {
                    return React.createElement("div", {
                      className: i == 0 ? "carousel-item active" : "carousel-item"
                    }, React.createElement("img", {
                      className: "d-block w-100",
                        src: image.url,
                        id: image.id
                    }), React.createElement("div", {
                      className: "remove-item",
                      onClick: function onclick() {
                            return removeImage(image);
                      }
                    }, React.createElement("span", {
                      className: "dashicons dashicons-trash"
                    })));
                  })), React.createElement("a", {
                    className: "carousel-control-prev",
                    href: "#pannoramo-carousel-edit-grid",
                    role: "button",
                    "data-slide": "prev"
                  }, React.createElement("span", {
                    className: "carousel-control-prev-icon",
                    "aria-hidden": "true"
                  }), React.createElement("span", {
                    className: "sr-only"
                  }, "Anterior")), React.createElement("a", {
                    className: "carousel-control-next",
                    href: "#pannoramo-carousel-edit-grid",
                    role: "button",
                    "data-slide": "next"
                  }, React.createElement("span", {
                    className: "carousel-control-next-icon",
                    "aria-hidden": "true"
                  }), React.createElement("span", {
                    className: "sr-only"
                  }, "Proximo")))
            );
        }

        function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

        function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

        function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

        function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

        return ((React.createElement("div", {
                className: "card bg-light"
            }, React.createElement("div", {
                className: "card-body"
            }, React.createElement("p", {
                className: "text-center"
            }, "Galeria  ", React.createElement("i", {
                className: "dashicons dashicons-format-gallery"
            })), React.createElement("p", {
                className: "card-text text-center"
            }, "Arrastes as imagens para este bloco, atualize novas ou selecione imagens de sua biblioteca"), React.createElement("div", {
                className: "gallery-grid"
            }, displayImages(images), React.createElement("div", {
                className: "text-center"
            }, React.createElement(MediaUpload, {
                onSelect: function onSelect(media) {
                    setAttributes({
                        images: [].concat(_toConsumableArray(images), _toConsumableArray(media))
                    });
                },
                type: "image",
                multiple: true,
                value: images,
                render: function render(_ref) {
                    var open = _ref.open;
                    return React.createElement(Button, {
                        className: "btn btn-outline-info",
                        onClick: open
                    }, React.createElement("i", {
                        className: "dashicons dashicons-upload"
                    }), "Upload");
                }
            })))))));
    },
    save: function (props) {
        var _this = void 0;
        state = {
            images: [
            "http://localhost/wordpress-2/wp-content/uploads/2019/05/background.jpeg",
            "http://localhost/wordpress-2/wp-content/uploads/2019/05/20180612_091647.jpg",
            "http://localhost/wordpress-2/wp-content/uploads/2019/05/1_sVpEiHHDkQWphC38yZywNA.png"
        ],
        currentIndex: 0,
        translateValue: 0
        };

        function goToSlide(index) {
            this.setState({currentIndex: index});
        }

        function goToPrevSlide(e) {
            let index = this.state.currentIndex;
            let { slide } = this.props;
            let slideLength = this.state.images.length - 1;

            if (index < 1) {
                index = slideLength;
            }

            --index;

            this.setState({ currentIndex: index });
        }

        function goToNextSlide(e) {

            if(this.state.currentIndex === this.state.images.length - 1) {
                return this.setState({
                    currentIndex: 0,
                    translateValue: 0
                })
            }

            this.setState(prevState => ({
                currentIndex: prevState.currentIndex + 1,
                translateValue: prevState.translateValue + -(this.slideWidth())
            }));
        }

        slideWidth = () => {
            return document.querySelector('.slide').clientWidth
        }

        return React.createElement("div", {
            id: "carouselExampleIndicators",
            className: "carousel slide",
            "data-ride": "carousel"
          }, React.createElement("ol", {
            className: "carousel-indicators"
          }, React.createElement("li", {
            "data-target": "#carouselExampleIndicators",
            "data-slide-to": "0",
            className: "active"
          }), this.state.images.map(function (image, i) {
            return React.createElement("li", {
                "data-target": "#carouselExampleIndicators",
                className: i == 0 ? "active" : "",
              "data-slide-to": i
            });
          })), React.createElement("div", {
            className: "carousel-inner"
          }, this.state.images.map(function (image, i) {
            return React.createElement("div", {
                className: i == 0 ? "carousel-item active" : "carousel-item"
              }, React.createElement("img", {
                className: "d-block w-100",
                src: image
              }));
          })), React.createElement("a", {
            className: "carousel-control-prev",
            href: "#carouselExampleIndicators",
            role: "button",
            "data-slide": "prev"
          }, React.createElement("span", {
            className: "carousel-control-prev-icon",
            "aria-hidden": "true"
          }), React.createElement("span", {
            className: "sr-only"
          }, "Previous")), React.createElement("a", {
            className: "carousel-control-next",
            href: "#carouselExampleIndicators",
            role: "button",
            "data-slide": "next"
          }, React.createElement("span", {
            className: "carousel-control-next-icon",
            "aria-hidden": "true"
          }), React.createElement("span", {
            className: "sr-only"
          }, "Next")));
    }
});