组合多个getEntiyRecords调用

时间：2021-07-05 作者：leemon

我有一个块引用了一个名为faq 有一个名为faq_group. 此块具有一个属性并生成多个getEntityRecords 呼叫。其中一个调用的参数依赖于前一个调用：

属性：

// the group attribute stores the slug of the selected faq_group slug from a SelectControl component
attributes: {
    group: {
        type: \'string\',
        default: \'\',
    },
}
电话：

// Get all terms from the faq_group taxonomy to fill a SelectControl component (name and slug)
const groups = useSelect( ( select ) =>
    select( \'core\' ).getEntityRecords( \'taxonomy\', \'faq_group\', { per_page: -1, orderby: \'name\', order: \'asc\', _fields: \'id,name,slug\' } ),
    []
);

// Get the term object with the same slug as the group attribute
const selectedGroup = useSelect( ( select ) =>
    select( \'core\' ).getEntityRecords( \'taxonomy\', \'faq_group\', { per_page: -1, orderby: \'name\', order: \'asc\', _fields: \'id,name,slug\' } )?.find( ( term ) => term.slug === attributes.group ),
    [ attributes.group ]
);

// Get posts from the faq custom post type with a faq_group term with id = selectedGroup.id
const faqs = useSelect( ( select ) =>
    select( \'core\' ).getEntityRecords( \'postType\', \'faq\', { faq_group: [ selectedGroup?.id ] } ),
    [ selectedGroup?.id ]
);
我的问题是，这可以简化吗？多个呼叫是否可以在一个内部组合useSelect 选择器？

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

多个呼叫是否可以在一个内部组合useSelect选择器？

是的，这里有一个例子useSelect() 返回使用destructuring赋值解包的对象（例如。const { a, b } = myFunc() 哪里myFunc() 退货{ a: \'foo\', b: 123 }):

const { groups, selectedGroup, faqs } = useSelect( ( select ) => {
    const { getEntityRecords } = select( \'core\' );

    // The args are identical for both "groups" and selectedGroup, so I put them in a constant.
    const groupsArgs = { per_page: -1, orderby: \'name\', order: \'asc\', _fields: \'id,name,slug\' };

    const selectedGroup = getEntityRecords( \'taxonomy\', \'faq_group\', groupsArgs )?.find(
        ( term ) => term.slug === attributes.group
    );

    return {
        groups: getEntityRecords( \'taxonomy\', \'faq_group\', groupsArgs ),
        faqs: getEntityRecords( \'postType\', \'faq\', { faq_group: [ selectedGroup?.id ] } ),
        selectedGroup,
    };
}, [ attributes.group ] );
如果您实际上不需要访问selectedGroup 从外部useSelect() 回调，则可以忽略selectedGroup 从列表中，即仅使用const { groups, faqs } = useSelect( ... ), 然后移除selectedGroup, （第三行）返回值。

实际上，不是打电话getEntityRecords() 使用相同的参数两次，可以只调用一次：

const { groups, selectedGroup, faqs } = useSelect( ( select ) => {
    const { getEntityRecords } = select( \'core\' );

    const groupsArgs = { per_page: -1, orderby: \'name\', order: \'asc\', _fields: \'id,name,slug\' };
    const groups = getEntityRecords( \'taxonomy\', \'faq_group\', groupsArgs );

    const selectedGroup = groups?.find( ( term ) => term.slug === attributes.group );

    return {
        groups,
        selectedGroup,
        faqs: getEntityRecords( \'postType\', \'faq\', { faq_group: [ selectedGroup?.id ] } ),
    };
}, [ attributes.group ] );

标签： custom-post-types   custom-taxonomy   javascript   block-editor   小码农  

相关推荐

您应该如何国际化分布在多个文件中但又构建在一个文件中的javascript？

我遵循了国际化的说明：https://developer.wordpress.org/block-editor/developers/internationalization/, 但它似乎与Gutenberg的开发工具没有很好的配合。它将在src 多个目录中的目录js 文件，并将其用作相对路径npm run build 将制作一个build/index.js 我正在排队的文件。这个wp i18n make-json languages --no-purge 将创建多个MD5无法工作的文件（可能是因为相对路