javascript - Wordpress 块：registerBlockType 编辑函数中的异步 REST 调用

问题描述

我正在编写一个创建块的 WordPress 插件，该块需要使用自定义 REST 端点提取数据，该端点在下面的示例中返回一个简单的字符串。我想将此字符串包含在我的 registerBlockType 配置中的 edit() 和 save() 的返回中，但是。我正在使用 fetch() 来调用 REST 端点，但这显然是异步的。任何关于最佳方式的想法表示赞赏，谢谢：

const { registerBlockType } = wp.blocks 

registerBlockType( 'daisy-views/da-test', {
    title:      'Daisy Test: Test Block',
    icon:       'format-gallery',
    category:   'common',
    attributes: {
        gid: {
            default: 2,
            type:   'integer'
        },
    },

    edit( props ) {

        const restEP = daRestUrl + 'test'

        fetch( restEP, {
            body: JSON.stringify( {p: 'test param'}),  // test parameters
            cache: 'no-cache',
            method: 'POST',
            redirect: 'follow', 
            referrer: 'no-referrer', 
            headers : {
                'Access-Control-Allow-Origin' : '*',
                'X-WP-Nonce' : wpApiSettings.nonce,
            }
        })
            .then( response => {
                response.json()
                    .then( data => {
                        var returnValue = data.data                     // REST test, returns a string
                        console.log( 'Fetch returns: ', returnValue )
                    })
            })

        return <div>
            test block edit
                {/* return value from fetch here */}
            </div>
    },
    save( props ) {

        return <div>
            Test Block
            {/* return value from fetch here */}
            </div>
    }
} );

标签： javascriptwordpressrestasynchronouswordpress-gutenberg

javascript - Wordpress 块：registerBlockType 编辑函数中的异步 REST 调用

问题描述

解决方案

推荐阅读