如何对用户数据使用getEntityRecords?

时间:2020-04-05 作者:Winston

如何使用getEntityRecords 对于用户数据?

我已经阅读了这两篇文章,似乎没有将用户的端点作为getEntityRecords 在古腾堡的源代码中。

是否可以通过REST API将用户数据获取到Gutenberg?

我已尝试使用此代码,但它返回一个空数组

wp.data.select("core").getEntityRecords(\'user\', \'user\')
古腾堡源代码:https://github.com/WordPress/gutenberg/blob/e4b5330e61b61b64b7f3354b6a9d9a8c395a9aa9/packages/core-data/src/entities.js#L14

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

So I guess you\'re still using WordPress version 5.3.x? :)

因为如果是这样(我也是),那么是的users endpoint (位于wp/v2/users) 不包括在默认实体中。

但您可以手动添加它:

// Add the endpoint.
wp.data.dispatch( \'core\' ).addEntities( [
    {
        name: \'user\',
        kind: \'root\',
        baseURL: \'/wp/v2/users\'
    }
] );
基本上就是这样添加的/defined 在WordPress 5.4中。

然后要获取实体记录,您需要这样做,这应该在WordPress 5.4和5.3中都可以使用。x:

// Get multiple records.
wp.data.select( \'core\' ).getEntityRecords( \'root\', \'user\', { per_page: 3 } );

// Get a single record.
wp.data.select( \'core\' ).getEntityRecord( \'root\', \'user\', 123 );

备用选项使用wp.apiRequest()

注意,它使用jQuery.ajax(), 所以方法如下done()fail() 可以使用。

// Multiple records.
wp.apiRequest( { path: \'wp/v2/users\', data: { per_page: 3 } } )
    .done( data => console.log( data ) )
    .fail( xhr => console.log( xhr.responseText ) );

// Single record.
wp.apiRequest( { path: \'wp/v2/users/123\' } ).done( data => console.log( data ) );

或使用wp.apiFetch()

// Multiple records.
wp.apiFetch( { path: \'wp/v2/users\', data: { per_page: 3 } } )
    .then( data => console.log( data ) )
    .catch( data => console.log( data.message ) ); // here, \'data\' is an object

// Single record.
wp.apiFetch( { path: \'wp/v2/users/123\' } ).then( data => console.log( data ) );
但无论使用哪种选项,请确保您的脚本具有正确的依赖项;对于wp.apiRequest(), 脚本句柄/ID为wp-api-request, 鉴于wp.apiFetch(), 是的wp-api-fetch.

快乐的编码!

回复您的评论,是的,getEntityRecords() 返回anull 如果API请求尚未解决(例如浏览器仍在接收服务器的响应)。

所以你不能简单地result = wp.data.select( \'core\' ).getEntityRecords( ... ) 并期望result 始终分配API请求的响应。

相反getEntityRecords() 应与一起使用wp.data.select( \'core/data\' ).isResolving() 像这样:

const { isResolving } = wp.data.select( \'core/data\' );

// The last argument is the three arguments you passed to getEntityRecords().
isResolving( \'core\', \'getEntityRecords\', [ \'root\', \'user\', { per_page: 3 } ] );
示例:

使用wp.data.subscribe():

const { subscribe, select } = wp.data;

// Fetch users list.
const query = { per_page: 3 };
select( \'core\' ).getEntityRecords( \'root\', \'user\', query );

const unsubscribe = subscribe( () => {
    const { isResolving } = select( \'core/data\' );
    const args = [ \'root\', \'user\', query ];

    if ( isResolving( \'core\', \'getEntityRecords\', args ) ) {
        console.log( \'still resolving\' );
    } else {
        const data = select( \'core\' ).getEntityRecords( \'root\', \'user\', query );
        console.log( \'data received\', data );

        // We\'re done, so let\'s unsubscribe from the isResolving() check above.
        unsubscribe();
    }
} );
wp.data.withSelect():

const { withSelect } = wp.data;
const { createElement: el } = wp.element;

const MyComponent = withSelect( select => {
    const { isResolving } = select( \'core/data\' );
    const query = { per_page: 3 };
    return {
        users: select( \'core\' ).getEntityRecords( \'root\', \'user\', query ),
        isRequesting: isResolving( \'core\', \'getEntityRecords\', [ \'root\', \'user\', query ] )
    };
} )( props => {
    if ( props.isRequesting ) { // still resolving; so display a "loading" indicator
        return el( \'div\', null, \'Loading data..\' );
    }

    const list = props.users.map( user => el( \'li\', { key: user.id }, user.name ) );
    return el( \'ul\', null, list );
} );

// Then somewhere use el( MyComponent ) to render the custom element above.
getEntityRecords() 具有withSelect().

我希望这能有所帮助。:)

相关推荐