ruby-on-rails - rails api 和 react api 的分页

Question

我正在构建一个网络应用程序。为此，我使用 rails 作为 backend 的 api。还使用 react 作为 frontend。我有一个模型 user。我想向网站用户显示所有 users 及其详细信息。所以我有大约 10,000 多个用户。所以我不能立即将所有用户发送到前端。我想一次只显示 50 个用户。因此，要查看接下来的 50 个用户，前端会向我发送一个新请求以获取接下来的 50 个用户，依此类推。所以我没有得到如何构建它的正确路径。

现在我正在像这样收集所有用户，我的服务器挂了。

我的 users_controller.rb

 class UsersController < ApplicationController
    def index
      users = User.all
      render_success(:ok, users, meta: { message: 'User sucessfully send' })
    end
 end

简而言之 - 我只想在每个请求中向前端发送有限数量的数据。

Answer 1

您可以使用 limit和 offset ，这是一个示例，它非常简单并且不需要任何库:

rails 代码:

# app/controllers/users_controller.rb
def users
  users = User.limit(params[:limit]).offset(params[:offset])
  render json: { users: users }
end

react 代码:

const PER_PAGE = 50  // How much users to load
export default class Users extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      offset: 0,
      limit: PER_PAGE,
      users: []
    }
    this.handlePageClickNext = this.handlePageClickNext.bind(this)
    this.handlePageClickPrev = this.handlePageClickPrev.bind(this)
  }
  loadUsersFromServer() {
    fetch(`/users?limit=${this.state.limit}&offset=${this.state.offset}`)
      .then(response => response.json()).then(response => {
      this.setState({ users: response.users })
    })
  }
  handlePageClickPrev() {
    // Load prev 10 users
    let offset = this.state.offset - PER_PAGE
    if (offset < 0) return 
    this.setState({offset: offset}, () => {
      this.loadUsersFromServer();
    });
  };
  handlePageClickNext() {
    // Load next 10 users
    let offset = this.state.offset + PER_PAGE
    if (offset >= this.state.total) return

    this.setState({offset: offset}, () => {
      this.loadUsersFromServer();
    });
  };
  componentDidMount() {
    // Load users on start
    this.loadUsersFromServer();
  }
  render() {
     const users = this.state.users.map((u)=> {
       return <li>{u.id}</li>
     })

    return (
     <div>
       <ul>
        {users}
       </ul>
       <button onClick={this.handlePageClickPrev}>Prev</button>
       <button onClick={this.handlePageClickNext}>Next</button>
     </div>
   );
  }
}