如何在Gutenberg中变更SelectControl时将数据保存到Post Meta字段

我是React和JSX新手，正在WordPress侧边栏开发下拉选择菜单，已实现显示现有文章分类的功能，但不知道怎么保存选中内容到Post Meta字段。

我已在functions.php中通过register_meta创建Post Meta字段：

<?php
register_meta( 'post', '_myprefix_text_metafield', array(
    'show_in_rest' => true,
    'type' => 'string',
    'single' => true,
    'sanitize_callback' => 'sanitize_text_field',
    'auth_callback' => function ()
    {
        return current_user_can( 'edit_posts' );
    }
) );

当前index.js脚本如下：

/**
 * https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerplugin
 * https://developer.wordpress.org/block-editor/reference-guides/components/select-control/#usage-2
 */
(function (wp) {
    const { registerPlugin } = wp.plugins;
    const { SelectControl } = wp.components;
    const { PluginDocumentSettingPanel } = wp.editPost;
    const { useSelect } = wp.data;
    const { useState } = wp.element;

    registerPlugin('spectator-primary-category', {
        render: function () {

            const { categories } = useSelect((select) => {
                const { getEntityRecords } = select('core');

                return {
                    categories: getEntityRecords('taxonomy', 'category'),
                }
            })

            let [selectedCategory, setSelectedCategory] = useState([]);

            let options = [];
            if (categories) {
                options = categories.map(category => ({ label: category.name, value: category.id }));
                options.unshift({ value: 0, label: 'Select a category' });
                console.log(options);
            }

            return (
                <PluginDocumentSettingPanel
                    name="spectator-primary-category-panel"
                    title="Add the primary category"
                    className="spectator-primary-category__panel"
                >
                    <SelectControl
                        value={selectedCategory}
                        options={options}
                        onChange={(tokens) => setSelectedCategory(tokens)}
                    />
                </PluginDocumentSettingPanel>
            )
        },
        icon: 'airplane' // or false if you do not need an icon
    });
})(window.wp);

我花了8小时查资料仍未解决，求指导如何实现数据保存？

已解决更新 #

感谢帮助，已成功实现Meta字段更新与选中值回显，最终使用的代码如下：

/**
 * https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerplugin
 * https://developer.wordpress.org/block-editor/reference-guides/components/select-control/#usage-2
 * https://stackoverflow.com/questions/75816358/gutenberg-save-data-to-post-meta-field-when-selectcontrol-is-changed
 */
(function (wp) {
    const { registerPlugin } = wp.plugins;
    const { SelectControl } = wp.components;
    const { PluginDocumentSettingPanel } = wp.editPost;
    const { useSelect, useDispatch } = wp.data;

    registerPlugin('spectator-primary-category', {
        render: function () {

            const postId = useSelect(
                (select) => select('core/editor').getCurrentPostId(),
                []
            );

            const postType = useSelect(
                (select) => {
                    return select('core/editor').getCurrentPostType();
                }, []
            );

            let editPost = useDispatch('core/editor').editPost;
            let savePost = useDispatch('core/editor').savePost;
            let entityRecordEdits = useSelect(
                (select) => select('core').getEditedEntityRecord('postType', postType, postId),
                []
            );
      
            let getEntityRecord = useSelect(
                (select) => select('core/editor').getEditedPostAttribute('meta')
            );

            // console.log(getEntityRecord);

            function handleChange(tokens) {
                let metaEdits = {
                    meta: {
                        ...entityRecordEdits.meta,
                        _spectator_primary_category_metafield: tokens
                    }
                };

                editPost(metaEdits); // Update the Core Data store (client).
                savePost(metaEdits); // Update the WordPress database (server).
            }
            const { categories } = useSelect((select) => {
                const { getEntityRecords } = select('core');

                return {
                    categories: getEntityRecords('taxonomy', 'category'),
                }
            })

            let options = [];
            if (categories) {
                options = categories.map(category => ({ label: category.name, value: category.id }));
                options.unshift({ value: 0, label: 'Select a category' });
                // console.log(options);
            }

            return (
                <PluginDocumentSettingPanel
                    name="spectator-primary-category-panel"
                    title="Add the primary category"
                    className="spectator-primary-category__panel"
                >
                    <SelectControl
                        value={getEntityRecord._spectator_primary_category_metafield}
                        options={options}
                        onChange={handleChange}
                    />
                </PluginDocumentSettingPanel>
            )
        },
        icon: 'airplane' // or false if you do not need an icon
    });
})(window.wp);

内容的提问来源于stack exchange，提问作者Aaron