wp.​​data.select('meta') 属性未定义与古腾堡 WordPress

Question

我将 Gutenberg 与 WordPress 结合使用，我想在用户发布帖子之前检查一些字段。

我想检查元框中的 number_square=[[],[],[],[],[],[],[],[],[],[]] number_list=[1,2,3,4,5,6,7,8,9,10] for row in number_square: for number in number_list: number_square.append(number) number_list.remove(number) number_list.append(number+10) print(number_square) 、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', ); });

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

Answer 1

当从 REST API 获取发布数据的 XHR/AJAX 请求尚未完全解决时，可能会发生这种情况，因此您不能像这样简单地访问元数据。您需要确保 getEditedPostAttribute('meta') 实际上返回一个对象，然后才访问 _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'
);