根据古腾堡块中另一个 SelectControl 的输入过滤 SelectControl 项（ES5，无 JSX）

Question

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

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

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作品时，数组会根据选择进行过滤。