web-dev-qa-db-fra.com

var est indéfini dans un bloc de Gutenberg

Je joue avec Gutenberg en ce moment et je suis coincé pour essayer de construire un bloc dynamique. Ceci est le code que j'utilise (certains codes sont omis pour plus de clarté):

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 ) ) renvoie la chaîne suivante:

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

Mais quand j'appelle map() sur le menu_selected var j'obtiens une erreur "menu_selected is undefined" et je ne comprends pas pourquoi.

Des idées?

Merci d'avance

javascriptarrayjsonblock-editor
1
leemon

Je pense que vous devez passer menu_selected

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

J'ai été capable de faire une chose très semblable à celle-ci:

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