web-dev-qa-db-ja.com

varはグーテンベルクブロックで未定義です

私は今グーテンベルクをいじっていて、動的ブロックを構築しようとしています。これは私が使っているコードです（わかりやすくするために一部のコードは省略されています）。

registerBlockType( 'my/block', {
    title: __( 'My Block' ),
    icon: 'email',
    category: 'common',
    attributes: {
        menu: {
            type: 'string',
            default: '',
        },
    },

    edit: withAPIData( ( props ) => {
        return {
            menu_selected: `/menus/v1/menus/${ props.attributes.menu }` // custom endpoint
        };
    } ) ( ( props ) => {
        const attributes = props.attributes;
        const menu_selected = props.menu_selected.data;

        const setMenu = value => {
            props.setAttributes( { menu: value } );
        };

        console.log( JSON.stringify( menu_selected ) );

        const ar = menu_selected.map( ( item ) => {
                        return (
                            <li className="menu_item">
                            { item.post_title }
                            </li>
                        );
                    } );
    }
} );

console.log( JSON.stringify( menu_selected ) )は次の文字列を返します。

[{"ID":3729,"post_title":"Item 1","post_type":"nav_menu_item"},
{"ID":3730,"post_title":"Item 2","post_type":"nav_menu_item"}]

しかし、menu_selected varでmap()を呼び出すと、「menu_selected is undefined」というエラーが表示され、その理由がわかりません。

何か案は？

前もって感謝します

javascriptarrayjsonblock-editor
1
leemon

menu_selectedを渡す必要があると思います

edit: withAPIData( ( props ) => {
    return {
        menu_selected: `/menus/v1/menus/${ props.attributes.menu }` // custom endpoint
    };
} ) ( ( { menu_selected } ) => {

私はとても似たようなことをすることができました：

edit: withAPIData( () => {
    return {
        posts: '/wp/v2/images?per_page=4&_embed'
    };
  } )( ( { posts, className } ) => {
      if ( ! posts.data ) {
          return "loading !";
      }
      if ( posts.data.length === 0 ) {
          return "No posts";
      }
2
David Sword