javascript - React 中的奇怪分页

Question

我正在 React 中构建一个单页应用程序，并使用从 API 加载的数据。我有下一个和上一个按钮来从 API 加载新的内容页面。这可行，但有一个奇怪的错误:第一次单击一个方向(下一个/上一个)时，API 请求使用与以前相同的页面参数。只有在该方向下一次单击时才会发生更新。

例如，如果我在第 1 页，并单击“下一步”，则 API 调用将针对第 1 页。如果我再次单击“下一步”，则请求将针对第 2 页。之后我可以继续单击“下一步”并获取预期结果。但是，如果我在第 3 页上，然后单击“上一页”，则请求将针对第 4 页。然后，接下来的上一次单击将针对第 3 页，然后是第 2 页，依此类推。

简而言之，需要额外单击一次才能朝寻呼机中的某个方向“开始移动”。

这是我的代码。任何帮助将不胜感激。

function getData() {
  fetch(`https://api.example.com/my/api/path?page=${ this.state.page }`, {
    method: 'get',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    }
  })
  .then(res => res.json())
  .then((json) => {
    let data = Object.keys(json.data).map(key => json.data[key]);
    this.setState( { data: data } );
  })
  .catch((err) => { throw new Error(err) });
}

let Item = React.createClass({
  getInitialState() {
    return { page: 1 };
  },

  componentDidMount() {
    getData.call(this);
  },

  handlePageClick(page) {
    this.setState({ page: this.state.page + page });
    getData.call(this);
  },

  render() {
    let items = this.state.data.map((item) => {

      return (
        <article style={ background() } className={ itemClass }>
          <h1 className="title">{item.name}</h1>
          <div className="description">
            {item.description}
          </div>
        </article>
      )
    });

    return (
      <div className="video-list">
        {items}

        <ul className="paging">
          <li onClick={ this.handlePageClick.bind(this, -1) }>Previous</li>
          <li onClick={ this.handlePageClick.bind(this, 1) }>Next</li>
        </ul>
      </div>
    )
  }
});

Answer 1

setState 调用在事件处理程序中进行批处理，因此调用它只是将状态更改排队。因此，当您调用 getData 时，组件的状态尚未更新。

setState takes a second argument ，这是在状态更新并且组件重新渲染后调用的回调，因此您可以这样做:

this.setState({ page: this.state.page + page }, () => getData.call(this));

<小时/>

如果您不打算将其作为一种方法，我建议您保持数据获取完全独立于组件:

function getData(page, cb) {
  fetch(`https://api.example.com/my/api/path?page=${ page }`, {
    method: 'get',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    }
  })
  .then(res => res.json())
  .then((json) => {
    let data = Object.keys(json.data).map(key => json.data[key]);
    cb(data)
  })
  .catch((err) => { throw new Error(err) });
}

...

handlePageClick(change) {
  var page = this.state.page + change
  this.setState({page})
  getData(page, data => this.setState({data}))
}