Question

我遇到了reactJS的新手问题（上周我开始学习）。我正在开发一个单页应用程序，它可以从Google Book API中呈现搜索结果，而且一切看起来都很棒，我可以从api中获取数据（实际上现在我正在使用AJAX）。

没有我在过去8小时内尝试过的工作来更新我的react-paginate组件中的状态。可能问题出在我的handlePageClick函数中，但是这个模块的文档有点奇怪加上我对反应的不熟悉使得事情变得更难。

所以这是我的 app.js

import React from 'react';
import ReactDOM from 'react-dom';
import { compose } from 'redux';
import {
  cloneDeep, findIndex, orderBy, keys, values, transforms
} from 'lodash';
import Bookshelf from './bookshelf.js';
import ReactPaginate from 'react-paginate';

import Header from './layout/header.js';
import Footer from './layout/Footer.js';
import Books from './layout/Books.js';
// import {Paginator, paginate } from './helpers';

const app = document.getElementById('app');



export default class Main extends React.Component{
  constructor(props){
    super(props);

    this.state = {
      items:[],
      offset:0
    };

    this.localSubmit = this.localSubmit.bind(this);
    this.onPerPage = this.onPerPage.bind(this);

    this.handlePageClick = this.handlePageClick.bind(this);

  }


  localSubmit(search) {

    this.setState({items: []});
    var component = this;

    $.get("https://www.googleapis.com/books/v1/volumes?q=intitle:" + encodeURIComponent(search) + "&printType=books&orderBy=newest&maxResults=39", function (data) {

      component.setState(data);
      Bookshelf();

      $(".front").css("background", "url(../img/no_book_cover.jpg)");

      for (var i = 0; i < component.state.items.length; i++) {
        if (component.state.items[i].volumeInfo.imageLinks != null) {

          $("#book-" + component.state.items[i].id).find(".front").css("background", "url("+ component.state.items[i].volumeInfo.imageLinks.thumbnail +")");
        }
      }


      $(".front").css("background-size", "100% 100%");
      $(".front").css("border", "2px solid #eee");
      $(".front").css("background-size", "100% 100%");


    });
  }

  handlePageClick(component){
    console.log(component);
    let selected = component.selected;
    let offset = Math.ceil(selected * this.props.perPage);
    console.log("the offset is:"+offset)
    this.setState({offset: offset}, () => {
      // this.localsubmit
    });
  }

  onSelect(page) {
    const pages = Math.ceil(
      this.state.items.length / 9
    );

    console.log(pages);

    this.setState({
      pagination: {
        perPage:this.state.pagination,
        page: Math.min(Math.max(page, 1), pages)
      }
    });
  }
  onPerPage(value) {
    this.setState({
      pagination: {
        page:this.state.pagination,
        perPage: parseInt(value, 10)
      }
    });
  }
  render () {
    const pages = Math.ceil(
      this.state.items.length / 9
    );
    console.log("length:"+this.state.items.length);
    console.log(pages);
    var books = [];
    var content;

    books = this.state.items.map(function(book) {
      return <Books key={book.id} item={book.volumeInfo} identifier={book.id} />;
    });

    if (books.length > 0) {
      content = books;
    } else {
      content = <div className="search-icon" ><span className="glyphicon glyphicon-search"></span></div>
    }

    return (
      <div>
      <Header localSubmit={this.localSubmit}/>
        <div className="main">
                <div id="bookshelf" className="bookshelf">
            {content}
          </div>
          <ReactPaginate previousLabel={"previous"}
               nextLabel={"next"}
               breakLabel={<a href="">...</a>}
               breakClassName={"break-me"}
               pageCount={this.state.pageCount}
               marginPagesDisplayed={2}
               pageRangeDisplayed={5}
               onPageChange={this.handlePageClick}
               containerClassName={"pagination"}
               subContainerClassName={"pages pagination"}
               activeClassName={"active"} />
        </div>
        <Footer />
      </div>
    );

  }

}

ReactDOM.render(<Main  perPage={10}/>, document.getElementById("app"));

这是另一个相关组件，书籍类

import React from "react";
import ReactDOM from 'react-dom';


var Books = React.createClass({

  getInitialState : function () {
    return ({});
  },
  componentDidMount : function () {

    if (this.props.item != null) {
      this.setState(this.props.item);
    }


  },
  render : function () {

    var authors = "";
    console.log(this.props.item);

    if (this.state.authors != null) {
      for (var i = 0; i < this.state.authors.length; i++) {

        if (i > 1) {
          authors = ", " + this.state.authors[i];
        } else {
          authors = this.state.authors[i];
        }
      }
    }

    var descrip = "...";

    if (this.state.description != null) {
      descrip = this.state.description.substring(0, 180) + "...";
    }

    var id = "";

    if (this.props.identifier != null) {
      id = "book-" + this.props.identifier;
    }

    return (

      <figure>
        <div className="book" id={id}></div>
        <div className="buttons"><a href={this.state.previewLink} target="_blank">Preview</a><a href="#">Details</a></div>
        <figcaption><h2>{this.state.title}<span>{authors}</span></h2></figcaption>
        <div className="details">
          <ul>
            <li>{descrip}</li>
            <li>{this.state.publishedDate}</li>
            <li>{this.state.publisher}</li>
            <li>{this.state.pageCount} pages</li>
          </ul>
        </div>
      </figure>

    );
  }

});

export default Books;

我已经尝试过另一个用于paginate的模块，但没有成功，这个看起来更容易，但是有些东西缺失了，你们可以帮帮我吗？

错误：当我点击下一页时，我得到了这个Cannot read property 'perPage' of undefined，并且在page 1中显示了整个内容，反应分页过滤实际上它不起作用。

编辑2：我已经取消了构造函数中this.handlePageClick = this.handlePageClick.bind(this);的行，但仍然没有过滤器，现在我没有得到任何错误，这让我发疯了=（

提前致谢！

Answer 1

错误：当我点击下一页时，我得到了这个无法读取未定义的属性'perPage'，并且在第1页中显示了整个内容，反应 - 分页过滤实际上它不起作用。

您需要将handlePageClick绑定到构造函数中的this（注释行），就像使用onPerPage和其他方法一样。

更新后编辑2 好吧现在好看。但是你的代码非常混乱，我可以清楚地看到你四处走动，改变事物并尝试。 :)帮自己一个忙，并删除所有jQuery代码，特别是在Ajax处理程序中。如果您需要不同的HTML，只需更新您的组件。

要直接回答您的问题，在查看react-paginate文档后，只会为您呈现一个分页符，但您仍然需要render只有this.state.items要显示的项目。在您的代码中，您将映射完整的onPerPage数组，并且每次都会呈现每本书。

最重要的是，我发现您在onSelect和constructor方法中创建了新的状态片段，但未在items中初始化。

您的应用所需的唯一状态是：

API调用返回的const PAGE_SIZE = 9
当前页面
可选：页面大小（每页项目数），您在组件外部声明为常量，并使用prop在您需要的任何位置重复使用。您可以稍后将其转换为constructor，以便您可以从外部配置组件的默认页面大小。

给出2个第一个键，在this.state = { items: [], currentPage: 1 }中声明您的初始状态，如：

items

然后，这是重要的部分，将<Book />到PAGE_SIZE映射逻辑提取到函数中，该函数考虑了currentPage和renderBooks(){ var startIndex = (this.state.currentPage-1)*PAGE_SIZE var endIndex = startIndex + PAGE_SIZE return this.state.items.slice(startIndex, endIndex).map(item => <Book {...your_props} /> }以仅选择数组中的相关项，如：

renderBooks()

最后，在您的渲染方法中，只需在每次要呈现图书时调用this.state.items.length > 0函数（即每次currentPage）。

在Paginate组件的事件处理程序上，只需为Bookshelf()设置适当的值即可。你不需要所有数学的东西，只要你的paginator中没有 Next 0.25 page 按钮，你就会一直使用整数。：）

希望它有所帮助！

P.S：你的AJAX处理程序中setState({ items })调用了什么？你应该render那里!!并在所有组件的dplyr方法中考虑新状态。

从JSON数据问题的React分页

1 个答案: