使用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 gutenberg和React js的新手，我尝试创建一个新的个人块，我的块需要一个与Gallery块相同的部分，但需要在更新图像时呈现图像轮播
这是我区块的完整代码：
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")));
}
});