我是React和JSX的新手，一直在WP侧边栏中的选择菜单下拉字段上工作。这个选择菜单显示了当前添加的帖子类别，这部分工作得很好。
我遇到的问题是如何保存这个选择，以及如何用选择控制区域中的选择选项更新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个多小时在互联网上寻找，但还没有能够实现我所需要的。任何真棒的人可以告诉我如何保存这些数据，请？
===更新===
感谢@kofiegan帮助我理解了这是如何工作的，我能够更新 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);