react中使用axios,下拉刷新怎么翻页获取列表?

react中使用axios,下拉刷新怎么翻页获取列表?
下面的代码是获取文章列表demo,用的ant-mobile的ListView组件:https://mobile.ant.design/com...

ArticleList.js

import React, { useState, useEffect} from "react";
import { ListView,Card, WhiteSpace,Grid } from 'antd-mobile';
import axios from 'axios';
import './ArticleList.less';



function ArticleList() {
  const [isLoading, setIsLoading] = useState(true);
  const [dataSource, setDataSource] = useState([]);

  useEffect(() => {
      axios.get('http://192.168.33.3/articles', {
          params: {limit:10,offset:5}
      }).then((response) => {
          setDataSource(response.data);
      }).catch(function (error) {
          throw new Error(error);
      }).then(function () {
          setIsLoading(false);
      });
  });

  let onEndReached = (event) => {
/*    if (isLoading && !this.state.hasMore) {  // hasMore: from backend data, indicates whether it is the last page, here is false
      return;
    }*/
    setIsLoading(true);
    axios.get('/articles', {
          params: {limit:10,offset:5}
    }).then((response) => {
          setDataSource([...dataSource,...response.data]);
    }).catch(function (error) {
          throw new Error(error);
    }).then(function () {
          setIsLoading(false);
    });
  };

  let listItem = (props) => {
        return (
            <div key={props.id}>
                <WhiteSpace size="lg" />
                <Card full>
                    <Card.Header title={props.user.username} thumb={props.user.avatar}/>
                    <Card.Body>
                        <div>{props.content}</div>
                    </Card.Body>
                    <Card.Footer content={props.comment_count} />
                </Card>
            </div>
        );
  };

  return (
      <ListView
          dataSource={dataSource}
          renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>{isLoading ? 'Loading...' : 'Loaded'}</div>)}
          renderRow={listItem}
          className="am-list"
          pageSize={4}
          useBodyScroll
          scrollRenderAheadDistance={500}
          onEndReached={onEndReached}
          onEndReachedThreshold={10}
      />
  );
}

export default ArticleList;

问题:
1、axios怎么翻页获取文章?
2、上面代码中有一段注释了的代码:

/*    if (isLoading && !this.state.hasMore) {  // hasMore: from backend data, indicates whether it is the last page, here is false
      return;
    }*/

hasMore应该设置在什么地方?

阅读 2k
1 个回答

1、每请求一次,page +1
2、hasMore可以后端返回,有下一页就为真

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题