useSelect в колбэке события – не получает значение вовремя

Я попытался использовать useSelect в колбэке события, как описано в руководстве блоков, однако я получаю undefined, так как значение получено позже, чем мне нужно. Я полагаю, что мне нужна какая-то дополнительная асинхронная функция, чтобы поймать значение, когда оно будет получено, или существует какой-то другой механизм, который не описан здесь?

Обратите внимание, что я не использую useSelect в классическом режиме с колбэком, потому что значение не может быть получено при обновлении компонента, а только при действии пользователя.

Этот код должен проверять, когда выбран определенный тип публикации, затем получить его выделенное изображение, в противном случае предоставить пользователю возможность выбрать изображение. В настоящее время я только записываю в консоль, потому что отлаживаю это.

SingleImage — это компонент, который позволяет пользователю выбрать и заменить изображение.

import { useBlockProps, URLInput } from '@wordpress/block-editor';
import SingleImage from '../../components/singleImage.jsx'
import { useSelect } from '@wordpress/data';

import './editor.scss';

export default function Edit({ attributes, setAttributes }) {
    const { getEntityRecord } = useSelect('core');
    const urlInputSetter = (url, post) => {
        if (post && ! attributes.imgID) {
            if (post.type === 'virtualne-izlozbe') {
                const record = getEntityRecord('postType', 'virtualne-izlozbe', post.id );
                if (record)
                    console.log(record.featured_media);
                else
                    console.log('empty');
            }
        }
        setAttributes( { link: url, postTitle: (post && post.title) } )
    }

    return (
        <div { ...useBlockProps() }>
            <URLInput
                value={ attributes.link }
                onChange={ urlInputSetter }
                label="Ссылка на публикацию"
                className="post-link"
            />
            { attributes.postTitle && <div className="post-title">Изображение ведет на публикацию { attributes.postTitle }</div> }
            <SingleImage
                imgID={attributes.imgID}
                imgURL={attributes.imgURL}
                alt="Изображение, которое ведет на публикацию"
                setImgIdAndUrl={(imgID, imgURL) => setAttributes({imgID, imgURL})}
                title="Выбрать изображение"
                help="Изображение, которое ведет на публикацию"
            />

        </div>
    );
}

В документации, которую вы опубликовали, сказано:

Не используйте useSelect таким образом, когда вызываете селекторы в функции рендера, потому что ваш компонент не будет перерисовываться при изменении данных.

import { useSelect } from '@wordpress/data';
 
function Paste( { children } ) {
    const { getSettings } = useSelect( 'my-shop' );
    function onPaste() {
        // Сделать что-то с настройками.
        const settings = getSettings();
    }
    return <div onPaste={ onPaste }>{ children }</div>;
}

Что в основном соответствует тому, как вы использовали, и поэтому ваш компонент перерисовывается при изменении.

Вы можете использовать хуки react (useState, useEffect), чтобы решить эту проблему. См. код ниже. Я прокомментировал код, чтобы объяснить изменения. (код не тестировался)

import { useBlockProps, URLInput } from '@wordpress/block-editor';
import SingleImage from '../../components/singleImage.jsx';
import { useSelect } from '@wordpress/data';
const { useState, useEffect } = wp.element;
import './editor.scss';

export default function Edit({ attributes, setAttributes }) {
    // Подготовка состояния
    const [post, setPost] = useState();

    // useSelect с колбэком, обратите внимание на третий параметр
    const record = useSelect(
        (select) => {
            return select('core').getEntityRecords(
                'postType',
                'virtualne-izlozbe',
                post.id
            );
        },
        // Это массив зависимостей, каждый раз, когда состояние
        // "post" изменяется, будет вызван колбэк useSelect.
        [post]
    );

    // Выполнение действий при изменении состояния
    useEffect(() => {
        // изменение значения record, сделать что-то
        if (record) {
            console.log(record.featured_media);
        } else {
            console.log('пусто');
        }
        // Массив зависимостей, каждый раз, когда record изменяется, колбэк useEffect
        // будет вызван
    }, [record]);

    const urlInputSetter = (url, urlPost) => {
        if (urlPost && !attributes.imgID) {
            if (urlPost.type === 'virtualne-izlozbe') {
                // Изменение состояния, чтобы колбэк useSelect был вызван
                setPost(urlPost);
            }
        }
        setAttributes({ link: url, postTitle: post && post.title });
    };

    return (
        <div {...useBlockProps()}>
            <URLInput
                value={attributes.link}
                onChange={urlInputSetter}
                label="Ссылка на публикацию"
                className="post-link"
            />
            {attributes.postTitle && (
                <div className="post-title">
                    Изображение ведет на публикацию {attributes.postTitle}
                </div>
            )}
            <SingleImage
                imgID={attributes.imgID}
                imgURL={attributes.imgURL}
                alt="Изображение, которое ведет на публикацию"
                setImgIdAndUrl={(imgID, imgURL) =>
                    setAttributes({ imgID, imgURL })
                }
                title="Выбрать изображение"
                help="Изображение, которое ведет на публикацию"
            />
        </div>
    );
}