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

我从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"
        }

这是我的一段代码，非常感谢您的帮助：

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>
    )
  }
}

从“React”导入React；
从“axios”导入axios；
导出默认类ArticleApi扩展React.Component{
构造函数（）{
超级（）；
此.state={
博客：“，
文章页数：[]
}
}
fetchData=（）=>{
get（`https:sample.sale/api/articles/ios\u index`）
。然后（res=>{
这是我的国家({
博客：res.data.data，
blogPages:res.data.metadata
})
})
.catch（错误=>{
return（'看起来好像有问题：\n'，错误）；
});
}
componentDidMount（）{
this.fetchData（）
}
上一页=（）=>{
get（`https:sample.sale/api/articles/ios_index${this.state.blogPages.pagination.previous_page}`）
。然后（res=>{
这是我的国家({
博客：res.data.data，
blogPages:res.data.metadata
})
})
.catch（错误=>{
返回（错误）；
});
}
下一页=（）=>{
get（`https:sample.sale/api/articles/ios_index${this.state.blogPages.pagination.next_page}`）
。然后（res=>{
这是我的国家({
博客：res.data.data，
blogPages:res.data.metadata
})
})
.catch（错误=>{
返回（错误）；
});
}
render（）{
让feed=“加载…”；
if（this.state.blogs）{
feed=this.state.blogs.map（（ele，idx）=>{
返回(
{ele.特许经营}

{ele.title}
)
})
}
返回(
目前，您正在为下一页和上一页功能构建一个奇怪的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}`)

上一页也是如此。
请更新您的帖子，添加一个问题，不清楚您需要什么帮助with@MitchLillie我是米奇，刚刚更新了我的问题。更清楚了吗？提前谢谢