如何更新获取的数据以查看下一页或上一页 - 分页答案

【问题标题】：How to update fetched data to view next or previous page - Paginated如何更新获取的数据以查看下一页或上一页 - 分页
【发布时间】：2018-05-23 23:15:46
【问题描述】：

我正在从 API 获取数据，然后将其显示到页面上。我做到了，

现在我想构建一个下一个和上一个按钮来呈现下一页信息。

返回的数据之一是链接的元数据，可以附加到基本 url。我得到了数据并将其更新为：

articlePages: []

数据结构如下：

 "metadata": {
            "pagination": {
                "next_page": "/api/articles/ios_index?page=2",
                "current_page": "/api/articles/ios_index?page=1",
                "previous_page": "/api/articles/ios_index?page=0"
            }
        }

我应该如何构建 previous 和 next 的函数，以便它们将正确的字符串附加到基本 url，然后获取新数据？

这是我收到的回复，然后我更新了我的状态：

响应格式：

"metadata": {
        "pagination": {
            "next_page": "/api/articles/ios_index?page=2",
            "current_page": "/api/articles/ios_index?page=1",
            "previous_page": "/api/articles/ios_index?page=0"
        }
    }


 "data" :{
            "id": 713,
            "url": "https:sample.-sale",
            "title": "The World According to Eddie Huang",
            "published_at": "2017-08-29T04:00:00.000Z",
            "published": true,
            "hero": "https://d1qz9pzgo5wm5k./CPG9crJHRqSPKQg9jymd",
            "listings": [],
            "tag_list": [
                "eddie-huang",
                "television"
            ],
            "franchise": "The Drop",
            "slug": "eddie-huang-interview-sale",
            "author": "Lawrence Schlossman",
            "content_type": "long",
            "position": "feature"
        }

这是我的代码的 sn-p，感谢任何帮助：

import React from 'react';
import axios from 'axios';

export default class ArticleApi extends React.Component {
  constructor() {
    super();
    this.state = {
      blogs: "",
      articlePages: []
    }
  }


fetchData = () => {
    axios.get(`https:sample.sale/api/articles/ios_index`)
      .then(res => {
        this.setState({
          blogs: res.data.data,
          blogPages: res.data.metadata
        })
      })
      .catch(error => {
        return ('Looks like there was a problem: \n', error);
      });
  }


componentDidMount() {
    this.fetchData()
  }


previousPage = () => {
      axios.get(`https:sample.sale/api/articles/ios_index${this.state.blogPages.pagination.previous_page}`)
      .then(res => {
        this.setState({
          blogs: res.data.data,
          blogPages: res.data.metadata
        })
      })
      .catch(error => {
        return (error);
      });
}

nextPage = () => {
      axios.get(`https:sample.sale/api/articles/ios_index${this.state.blogPages.pagination.next_page}`)
      .then(res => {
        this.setState({
          blogs: res.data.data,
          blogPages: res.data.metadata
        })
      })
      .catch(error => {
        return (error);
      });
}

render() {
   let feed = "Loading...";
      if (this.state.blogs) {
        feed = this.state.blogs.map((ele, idx) => {
          return (
             <div key={idx} >
                <div className="articleContent">
                  <p><strong>{ele.franchise}</strong></p>
                  <h1 className="title"> {ele.title}</h1>
                </div>
            </div>
        )
      })
    }
return (
      <div>
        <h3 FEED</h3>
         {feed}
          <button onClick={this.previousPage}>Previous Page</button>
           <button onClick={this.nextPage}>Next Page</button>
       </div>
    )
  }
}

【问题讨论】：

请更新您的帖子以包含一个问题，目前尚不清楚您需要什么帮助
@MitchLillie I Mitch，刚刚更新了我的问题。是不是更清楚了？提前致谢

标签： javascript reactjs pagination

【解决方案1】：

目前您正在为下一页和上一页功能构建一个奇怪的 URL：

axios.get(`https:sample.sale/api/articles/ios_index${this.state.blogPages.pagination.next_page}`)

// but this.state.blogPages.pagination.next_page is equal to "/api/articles/ios_index?page=2", right? 
// So if we replace the variable with its value, your url actually looks something like this:

axios.get('https:sample.sale/api/articles/ios_index/api/articles/ios_index?page=2')

正确的调用应该是这样的：

axios.get(`https:sample.sale${this.state.blogPages.pagination.next_page}`)

上一页也是如此。

【讨论】：