1

我一直在尝试创建一个 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返回“未定义”。

我写了计时器，认为它可以帮助我更新内容this.setState。

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

4

0 回答 0