如何使用分类的自定义WordPress Gutenberg呈现帖子？

Question

我一直试图创建一个Gutenberg块，该块在WordPress编辑页面上以复选框的形式显示类别列表，然后在前端页面上显示链接到所选类别的帖子列表。

我已经成功添加了编辑页面的复选框。当我选择类别，更新然后刷新页面时，它们将保持我以前离开它们的方式。

但是我似乎无法弄清楚如何进行API调用以获取链接到我选择的类别的帖子列表。

这是我的编辑代码和属性：

let globalCategories = [];
let globalPosts = [];

const data = wp.apiFetch({ path: '/wp/v2/categories' })
   .then(( obj ) => {
       globalCategories.push(obj.map(o => {
           return o;
       }));

       return globalCategories;
   });

registerBlockType( 'mdlr/multi-category-list', {
   title: __( 'Digiminster: Multi Category List' ),
   icon: 'lock',
   category: 'common',
   attributes: {
       checkedArray: { type: 'array' },
       postsArray: { type: 'array' }
   },
   edit(props) {
        console.log("checkedArray: ", props.attributes.checkedArray);
       if(props.attributes.checkedArray === undefined) {
           props.attributes.checkedArray = globalCategories[0];
       }

       function updateContent(event, index) {
           props.setAttributes({
               checkedArray: props.attributes.checkedArray.map((o, i) => {
                   if (index === i) {
                       o.checked = event.target.checked;
                   }

                   return o;
               })
           });
       }

       return props.attributes.checkedArray.map((c, i) => (
           <div>
               <input
                   type="checkbox"
                   checked={c.checked}
                   onChange={e => updateContent(e, i)}
               />
               <label>{c.name}</label>
           </div>
       ));
   },
   ...

这是我的保存代码：

save: class extends wp.element.Component {
    constructor(props) {
        super(props);
        this.state = props.attributes;
    }

    updateContent(contentData) {
        console.log("Hello", globalPosts);
        this.setState({ postsArray: globalPosts });
        console.log(this.state.postsArray); // <- Returns undefined
    }

    render() {
        let checkedArray = this.state.checkedArray;

        if (checkedArray !== undefined) {
            let categoryIds = checkedArray.filter(c => c.checked === true).map(c => c.id).join();

            if (categoryIds !== '') {
                wp.apiFetch({ path: '/wp/v2/posts?categories=' + categoryIds })
                    .then(( obj ) => {
                        globalPosts = obj.map(o => o);
                        console.log("Global posts", globalPosts);
                        return globalPosts;
                    });
            }       
        }

        let postsLoadingTimer = setInterval(() => {
            if (globalPosts !== undefined) {
                this.updateContent(globalPosts);
                clearInterval(postsLoadingTimer);
            }
        });

        return (
            <div>helloooooo</div>
        );
    }
}

我希望能够获取this.state.postsArray，循环浏览并显示我的帖子，但是this.setState似乎不起作用，并且正在使this.state.postsArray返回“ undefined”。

我写定时器的想法是，它可以帮助我用this.setState更新内容。

我的主要目标是根据所选类别显示帖子列表。