wp.data.select('meta') 属性未定义 Gutenberg for WordPress

Question

我将 Gutenberg 与 WordPress 一起使用，我想在用户发布他的 post.

之前检查一些字段

我想检查元框中的 featured image、title 和一个简单的 text field 是否不为空。

如果字段为空，则会显示一条通知并且我锁定了“发布”按钮。

目前，featured image 和 title 一切正常。但是当我试图检查元框中的文本字段是否为空时，我得到了错误：

Uncaught TypeError: Cannot read property '_myprefix_text_metafield' of undefined

我用这样的文本字段创建了我的元框：

import { __ } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { TextControl } from '@wordpress/components';

const TextController = (props) => {
    const meta = useSelect(
        (select) =>
        select('core/editor').getEditedPostAttribute('meta')['_myprefix_text_metafield']
    );
    const { editPost } = useDispatch('core/editor');
    return (
        <TextControl
        label={__("Text Meta", "textdomain")}
        value={meta}
        onChange={(value) => editPost({ meta: { _myprefix_text_metafield: value } })}
        />
    );
};

const PluginDocumentSettingPanelDemo = () => (
    <PluginDocumentSettingPanel name="text-presentation" title="Texte de présentation" className="custom-panel custom-panel-presentation" icon=" ">
        <TextController />
    </PluginDocumentSettingPanel>
);

registerPlugin('plugin-document-setting-panel-demo', {
    render: PluginDocumentSettingPanelDemo
});

并检查所有字段是否不为空：

const locks = [];

function lock( lockIt, handle, message ) {
    if ( lockIt ) {
        if ( ! locks[ handle ] ) {
            locks[ handle ] = true;
            wp.data.dispatch( 'core/editor' ).lockPostSaving( handle );
            wp.data.dispatch( 'core/notices' ).createNotice(
                'error',
                message,
                { id: handle, isDismissible: false }
            );
        }
    } else if ( locks[ handle ] ) {
        locks[ handle ] = false;
        wp.data.dispatch( 'core/editor' ).unlockPostSaving( handle );
        wp.data.dispatch( 'core/notices' ).removeNotice( handle );
    }
}

wp.data.subscribe( () => {
    // get presentation
    const textPresentation = wp.data.select( 'core/editor' ).getEditedPostAttribute('meta')['_myprefix_text_metafield'];

    // Lock the post if the presentation is empty.
    lock(
        ! textPresentation,
        'presentation-lock',
        'Please add a presentation text',
    );

    // get the current title
    const postTitle = wp.data.select( 'core/editor' ).getEditedPostAttribute( 'title' );

    // Lock the post if the title is empty.
    lock(
        ! postTitle,
        'title-lock',
        'Please add a title',
    );


    // get the Featured Image
    const featuredImage = wp.data.select( 'core/editor' ).getEditedPostAttribute( 'featured_media' );

    // Lock post if there is no Featured Image selected
    lock(
        featuredImage === 0,
        'featured-image-lock',
        'Please add a featured image',
    );

});

当我在控制台中写入时：

wp.data.select( 'core/editor' ).getEditedPostAttribute('meta')['_myprefix_text_metafield'];

该值很好地返回了我的文本字段的值。

Answer 1

当从 REST API 获取 post 数据的 XHR/AJAX 请求尚未完全解决时，可能会发生这种情况，因此您不能像那样简单地访问元数据.您需要确保 getEditedPostAttribute('meta') 实际上是 returns 一个对象，然后才能访问 _myprefix_text_metafield 属性.

所以试试这个：

const textPresentation = wp.data.select( 'core/editor' ) // wrapped for brevity
    .getEditedPostAttribute( 'meta' )?._myprefix_text_metafield;

// Lock the post if the presentation is empty.
lock(
    undefined !== textPresentation && ! textPresentation,
    'presentation-lock',
    'Please add a presentation text'
);

wp.data.select('meta') 属性未定义 Gutenberg for WordPress

wp.data.select('meta') property undefined with Gutenberg for WordPress

wordpress

wordpress-gutenberg

wp.data.select('meta') 属性 未定义 Gutenberg for WordPress

wp.data.select('meta') property undefined with Gutenberg for WordPress

wordpress

wordpress-gutenberg

wp.data.select('meta') 属性未定义 Gutenberg for WordPress