根据来自Gutenberg块中另一个SelectControl的输入过滤SelectControl项目（ES5，无JSX）

Question

我要构建的Wordpress Gutenberg自定义块中有2个SelectControl。我不使用ES6。只有ES5，没有JSX。2 SelectControl应该以下列方式工作：

他们从REST WP Api获取帖子类型和所有帖子。我想要实现的是，当我从SelectControl 1（帖子类型）中选择一个项目时，我在SelectControl 2中获得了相关的过滤帖子。所有帖子和帖子类型在页面加载时都预加载到数组中。我可以使用下面的代码用REST Api成功地填充两个控件，但是当涉及根据从第一个控件中选择的值来过滤第二个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％的反应。所以我不得不在setAttributes方法中使用onChange方法。看起来setAttributes与React中的setState相似，并使插件UI刷新并重新加载我的TestControl。当TestControl重新加载时，我的optionsfiltered.filter工作，并且根据选择对数组进行了过滤。