0

我目前正在学习 react.js 和 javascript。今天开始看wordpress的Rest API。我设法将特定类别的帖子加载并映射到我的页面上。现在我想在点击时加载不同的类别。但是我有点卡住了。每个类别的数据可以通过以下链接调用：

http://127.0.0.1/reactwp/wp-json/wp/v2/posts/?filter[category_name]=旅行 http://127.0.0.1/reactwp/wp-json/wp/v2/posts/?filter[类别名称]=类别XY

我想根据按钮上的 onclick 事件更改类别名称。因此，例如，如果有人单击类别 Car，则加载 WP 类别 Car 中的所有帖子。所以我需要一个 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;

谢谢你的帮助。

4

1 回答 1

0

对于任何面临类似问题的人。我自己解决了。但是请注意，这不是一个完美的解决方案，因为 redux 没有实现。我只是使用我的链接结构（参数）从 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;
于 2016-12-14T03:54:29.890 回答