Как я могу отображать свои сообщения с помощью моего пользовательского блока WordPress Gutenberg по категориям? - PullRequest
Новая
       8

Как я могу отображать свои сообщения с помощью моего пользовательского блока WordPress Gutenberg по категориям?

1 голос
/ 12 апреля 2019

Я пытался создать блок Гутенберга, который отображает список категорий в виде флажков на моих страницах редактирования 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.

Моя главная цель - отобразить список сообщений на основе выбранных категорий.

...