axios-on-rails，如何请求一组记录

Question

我正在用Rails创建一个带有ReactJS前端的应用程序。在我的前端，我使用axios on- Rails纱线包来对Rails api后端提出所有请求。

下面是我要做的事情:对于站点的主页，我想要实现无限滚动功能。为此，我需要能够请求小的记录集，因为页面继续滚动。我知道如何将记录传递到前端的唯一方法是使用：

​

axios.get('/posts.json')
  .then((response) => {
    ...
  })
  .catch(error => console.log(error));

​

不过，这将返回所有帖子，最终将有数千个帖子。我不希望这种事发生。那么，如何修改这个请求，使我只获得前20条记录呢？

答案详细信息

好的，我再看一遍“Gagan Gupta”建议的分页，几个小时后，它就开始工作了。这是我所做的。

yarn add react-infinite-scroll来获取所需的组件。

对于我的饲料组件我做了..。

​

import React from 'react';
import Post from './Post';
import { connect } from 'react-redux';
import { loadPosts } from '../actions/posts';
import InfiniteScroll from 'react-infinite-scroller';
import axios from 'axios-on-rails';

const node = document.getElementById('owc_feed_payload');
const numberOfPosts = JSON.parse(node.getAttribute('number_of_posts'));

class Feed extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: props.posts,
      hasMoreItems: true,
      page: 1
    };
  }

  componentDidUpdate(prevProps) {
    if (this.props !== prevProps) {
      this.setState({ posts: this.props.posts, hasMoreItems: this.props.hasMoreItems });
    }
  }

  loadMore = (page) => {
    axios.get('/posts.json', {
      params: { page: page }
    })
      .then((response) => {
        console.log(response.data);
        this.props.dispatch(loadPosts(response.data));
        this.setState({ hasMoreItems: this.state.posts.length < numberOfPosts ? false : true, page: this.state.page + 1 });
      })
      .catch(error => console.log(error));
  }

  render() {
    let items = [];
    this.state.posts.map((post, index) => {
      items.push(
        < ... key={index}>
          ...
        </...>
      );
    });

    return (
      <InfiniteScroll
        pageStart={0}
        loadMore={this.loadMore}
        hasMore={this.state.hasMoreItems}
        loader={<p>Loading...</p>}>
          { items }
      </InfiniteScroll>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    timestamp: state.timestampReducer,
    posts: state.postsReducer
  }
};

export default connect(mapStateToProps)(Feed);

​

我使用redux来管理我的帖子的状态。接下来，我将gem 'kaminari'添加到我的gem文件中，并运行bundle installed，然后将这一行添加到控制器的索引操作：@posts = Post.all.order(created_at: :desc).page params[:page]，并将其添加到我的模型：paginates_per 5中。

现在，它像预期的那样滚动和加载！太棒了。

Answer 1

解决办法是使用分页。每个请求将只带来一组您将在方法中指定的记录。您可以使用像分页、卡米纳里这样的宝石来执行&这是一个名为帕蒂的新创业板，他们声称它比其他两个更快。

只需在每次请求之后增加url中的页面参数，直到最后一个页面，您就会得到所需的输出。

我很高兴我的意见帮助了你:)

将JS代码更改为：

axios.post('/posts.json', {
  params: {
    page: page
  }
}).then((response) => {
    console.log(response.data);
    ...
  }).catch(error => console.log(error));
}

Answer 2

看看axios之后的console.log(响应)，然后是方法，这样您就可以看到从服务器返回的对象数组。之后，您可以使用方法的.length属性设置它，如：

axios.get('/posts.json')
  .then((response) => {

    if(response.data.length > 20){
      console.log(response.data.slice(0,20))
      }
  })
  .catch(error => console.log(error));