根据古腾堡区块(ES5，无JSX)中另一SelectControl的输入过滤SelectControl项目

Question

我有2个SelectControl，来自我正在尝试构建的Wordpress Gutenberg自定义块。我不使用ES6。只有ES5，没有JSX。2 SelectControl应按以下方式工作：

他们从REST WP Api获取帖子类型和所有帖子。我想要实现的是，当我从SelectControl 1(帖子类型(中选择一个项目时，我会在SelectControl 2中获得相关的过滤帖子。所有帖子和帖子类型都在页面加载时预加载到数组中。我可以用下面的代码成功地用RESTApi填充这两个控件，但当根据第一个控件中的选定值过滤第二个selectcontrol时，它不起作用。没有错误。

onChange: function(value) {
selectedType = value;
}

上面的代码没有任何效果。也没有错误。无法弄清楚这里出了什么问题

(function(wp) {
var registerBlockType = wp.blocks.registerBlockType;
var InspectorControls = wp.blockEditor.InspectorControls;
var PanelBody = wp.components.PanelBody;
var TextControl = wp.components.TextControl;
var ColorPalette = wp.components.ColorPalette;
var SelectControl = wp.components.SelectControl;
var Dashicon = wp.components.Dashicon;
var el = wp.element.createElement;
var withState = wp.compose.withState;
var __ = wp.i18n.__;
var options = [{
value: 0,
label: __('Select a Post...')
}];
var optionsfiltered = null;
var selectedType = '';
var posttypeOptions = [{
value: 0,
label: __('Select a Post Type...')
}];
wp.apiFetch({
path: '/custom/v1/all-posts'
}).then(function(posts) {
var optionsAppend = posts.map(function(post) {
return {
value: post.id,
label: post.title,
type: post.type
}
});
options = options.concat(optionsAppend);
optionsfiltered = options;
});
wp.apiFetch({
path: '/wp/v2/types'
}).then(function(posttypes) {
console.log(posttypes);
for (let [key, item] of Object.entries(posttypes)) {
posttypeOptions.push({
value: item.slug,
label: item.name
});
}
});
function TestControl(props) {
var attributes = props.attributes;
var setAttributes = props.setAttributes;
var setState = props.setState;
var inspectorControl = el(InspectorControls, {},
el('h4', {}, el('span', {}, "Select Value")),
el(SelectControl, {
label: "Select a Post Type",
value: attributes.selectedPost,
options: posttypeOptions,
style: {
fontSize: '10px'
},
onChange: function(value) {
selectedType = value;
}
}),
el(SelectControl, {
label: "Select a Post",
value: attributes.selectedPost,
options: optionsfiltered.filter(function(el) {
return el.type === selectedType;
}),
style: {
fontSize: '10px'
},
onChange: function(value) {
setAttributes({
url: value
});
}
})
);
return el('div', {
style: {
backgroundColor: attributes.color,
color: "#00ff00"
}
},
inspectorControl
);
}
registerBlockType('resorcedomain/resource-cards-block', {
title: __('Resource Cards'),
category: 'widgets',
icon: {
foreground: '#46aaf8',
src: 'store'
},
attributes: {
posts: {
type: 'string',
default: null
},
orders: {
type: 'string',
default: null
},
tagfilter: {
type: 'string',
default: null
}
},
edit: withState({})(TestControl),
save: function(props) {
return null;
}
});
})(window.wp);

Answer 1

我忘了wordpress不是100%反应的。所以我不得不在onChange方法中使用setAttributes方法。看起来setAttributes类似于React中的setState，并使插件UI刷新和重新加载我的TestControl。当TestControl重新加载我的optionsfiltered.filter工作时，数组会根据选择进行过滤。