Загрузка onClick Post из Wordpress Category Rest API

В настоящее время я изучаю response.js и javascript. Сегодня я начал знакомиться с Rest API wordpress. Мне удалось загрузить и сопоставить публикацию из определенной категории на моей странице. Теперь я хотел бы по клику загружать разные категории. Однако я как бы застрял. Данные для каждой категории можно вызвать по следующей ссылке:

http://127.0.0.1/reactwp/wp-json/wp/v2/posts/?filter[category_nameprovided= путешествия http://127.0.0.1/reactwp/wp-json/wp/v2/posts/?filter[category_name]= categoryXY

Я хотел бы изменить название категории на основе события onclick на кнопке. Так, например, если кто-то нажимает на категорию «Автомобиль», загружаются все сообщения из категории «Автомобиль WP». Поэтому мне нужно событие onclick, которое изменяет последнюю часть URL-адреса для вызова данных из этой конкретной категории. Пока это мой код.

import React, {Component} from 'react';
import {connect} from 'react-redux';
import Request from 'superagent';
import _    from 'lodash';


class TestComponent extends Component {

    constructor() {
        super();
        this.state = {};
    }

componentWillMount () {
    var url = "http://127.0.0.1/reactwp/wp-json/wp/v2/posts/?filter[category_name]=travel";
    Request.get(url).then((response) => {
        this.setState({
            category: response.body,
            total: response

        });
    });
}



    render() {
        var category = _.map(this.state.category, (website) => {
            return (
                <div>
                    <h2>{website.title.rendered}</h2>
                    <p>{website.content.rendered}</p>
             </div>
             ); 
        });

        return (
            <div>
             <button>Click to load category1</button>
             <button>Click to load category2</button>
             <ul>{category}</ul>
            </div>
        );
    }
}


export default TestComponent;

Спасибо за вашу помощь.


reactjs javascript wordpress wordpress-rest-api
person zbkrt    schedule 07.12.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Для всех, кто сталкивается с подобной проблемой. Решил сам. Однако имейте в виду, что это не идеальное решение, поскольку сокращение не реализовано. Я просто использовал свою структуру ссылок (параметры) для вызова нужной категории из Wordpress Rest API.

class TestComponent extends Component {

        constructor() {
            super();
            this.state = {};
        }




   componentWillReceiveProps() {
        let category = (this.props.params.data);
        var url = "http://127.0.0.1/reactwp/wp-json/wp/v2/posts/?filter[category_name]="+category+"";
        Request.get(url).then((response) => {
            this.setState({
                category: response.body,
                total: response

            });
        });
    }



        render() {



            var category = _.map(this.state.category, (website) => {
                return (
                    <div>

                        <WebsiteItem title={website.title.rendered} description={website.content.rendered} image={website.better_featured_image.source_url} link={website.acf.websitelink}/>
                 </div>
                 ); 
            });

            return (
                <div>

                 <ul>{category}</ul>

                </div>
            );
        }
    }


    export default TestComponent;
person zbkrt    schedule 14.12.2016