更新URL以获取数据并更新onPageChanged ReactJs上的数据

时间:2018-11-04 12:00:13

标签: reactjs wordpress-rest-api

我正在研究WordPress主题以使用Rest API获取数据,并且对如何将帖子更新到新页面有疑问。

export default class Blog extends Component {
  constructor(props) {
    moment.locale(your_locale);
    super(props);
    this.state = {
      posts: [],
      post: null,
      routurl: "wp-json/wp/v2/posts?_embed"
    };
  }

  componentDidMount() {
    fetch(this.state.routurl)
      .then(res => {
        return res.json();
      })
      .then(
        posts => {
          this.setState({
            posts: posts
          });
        },
        error => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      );
  }

  onPageChanged = data => {
    const { currentPage, totalPages, pageLimit } = data;
    //I want to Update posts state/change everytime routurl change.
    //EX, page 2: routurl: "wp-json/wp/v2/posts?_embed&page=2"
  };

  render() {
    const { posts } = this.state;
    return (
      <div>
        <Pagination
          totalRecords={totalPost}
          pageLimit={5}
          pageNeighbours={1}
          onPageChanged={this.onPageChanged}
        />
        {posts.map((post, i) => (
          <a key={post.id} href={post.link}>
            {post.title.rendered}
          </a>
        ))}
      </div>
    );
  }
}

如上例所示,我使用分页,并且currentPage会更改onPageChanged。我想每次这样更改当前页面时更新帖子:

"wp-json/wp/v2/posts?_embed&page=2"
"wp-json/wp/v2/posts?_embed&page=3"
"wp-json/wp/v2/posts?_embed&page=4"
...

0 个答案:

没有答案