javascript - 如何在React中实现JSON状态对象加载后的分页

Question

在 React 中有一个 JSON 返回字符串，我希望能够对其进行切片并仅使用前六个对象。我可以一次返回所有 JSON 并渲染它，但我想只调用其中的一些。与前六个一样，使用 Infinite Scroll 返回接下来的六个。我不需要如何设置无限滚动的答案，我只需要 JSON、apiResponse 状态对象以我可以用来调用其中一部分的方式加载。

JSON 正在 Express 中从我的服务器端返回，它看起来像这样......

[{"image":"https://www.fakeimageurl.com/3456","post":"http://www.urltothefakeimage/4554"},  
{"image":"https://www.fakeimageurl.com/3456","post":"http://www.urltothefakeimage/4554"},  
{"image":"https://www.fakeimageurl.com/3456","post":"http://www.urltothefakeimage/4554"}, 
{"image":"https://www.fakeimageurl.com/3456","post":"http://www.urltothefakeimage/4554"} <... etc.>]

当我说我想要前六个元素时，我的意思是我想要大括号中的前六个元素，每个元素都有其 image 和 post 链接。
我尝试在下面加载它。现在我只能让它一次性加载所有内容。虽然在这里我尝试将其加载并存储在 componentDidUpdate 中。我想存储 JSON 元素并抓取其中的一些内容。

首先使用函数 callAPI() 请求 JSON。

import React from 'react';

export default class Fb_grid extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      apiResponse: ""
    }
}
componentDidMount() {
  this.callAPI();
}

callAPI() {
    fetch('/api/getList')
        .then(res => res.json())
        .then(res => this.setState({ apiResponse: res }))
}
componentDidUpdate() {
  this.setState({ apiResponse: Object.values(apiResponse).map((value, index) => 
    value.post, value.image )})
}
  render() {
    /* Extract apiResponse object */
    const { apiResponse } = this.state;

    /* Assume that while apiResponse matches initial state, the fetch
    request is still busy, so render a loading message */
    if(!apiResponse) {
        return <p className="row">Loading</p>
    }
    return(
      <div className="App">
      <div class="row">
        {(apiResponse).map((value, index) => 
        <a target="_blank" rel="noopener noreferrer" href={value.post}>
          <img src={value.image} className="image"/>
        </a>)}
        </div>
      </div>
    )
  }
}

如果您摆脱了 componentDidUpdate 并返回此内容而不是上面的代码，则组件将很好地读取 JSON 并渲染图像并为它们提供带有 value.post 的链接>.

return(
  <div className="App">
  <div class="row">
    {Object.values(apiResponse).map((value, index) => 
    <a target="_blank" rel="noopener noreferrer" href={value.post}>
      <img src={value.image} className="image"/>
    </a>)}
    </div>
  </div>
)

Answer 1

如果您只想读取 JSON 中的前 6 项，可以使用以下代码。

callAPI() {
    fetch('/api/getList')
        .then(res => res.json())
        .then(res => this.setState({ apiResponse: res.slice(0, 6) }))
}

相反，如果您想显示 6 x 6 的元素，您可能需要一个 next 和 previous 按钮，调用这些回调:

next() {
  this.setState({ page: this.state.page+1 }))
}
previous() {
  this.setState({ page: this.state.page-1 }))
}

现在，要显示 6 x 6 的元素，您只需在渲染中执行此操作即可仅渲染当前页面:

this.state.apiResponse.slice(this.state.page*6, (this.state.page+1)*6)

当然，当您到达开始或结束时，您需要禁用下一个和上一个按钮。对您的 next 和 previous 函数进行安全保护，以确保您不会越界:

next() {
  this.setState({ page: Math.min(this.state.apiResponse.length-1, this.state.page+1) }))
}
previous() {
  this.setState({ page: Math.max(0, this.state.page-1) }))
}