【发布时间】：2017-06-12 01:07:37
【问题描述】：
我陷入了 reactJS 的新手问题（我上周开始学习）。我正在开发一个单页应用程序，它从 Google Book API 呈现搜索结果，一切看起来都很棒，我可以从 api 获取数据（实际上现在我正在使用 AJAX）。
我在过去 8 小时内所做的尝试都无法更新我的 react-paginate 组件中的状态。 可能问题出在我的 handlePageClick 函数中，但是这个模块的文档有点奇怪，加上我对 react 的不熟悉让事情变得更加困难。
这是我的 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"));
这是另一个相关的组件，books 类
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;
我已经尝试过另一个用于分页的模块，但没有成功，这个看起来更容易，但是缺少一些东西，你们能帮帮我吗？
错误：
当我点击下一页时，我得到了这个Cannot read property 'perPage' of undefined，在page 1 中显示了整个内容，react-paginate 过滤实际上它不起作用。
编辑 2：
我在构造函数中取消了this.handlePageClick = this.handlePageClick.bind(this); 行的注释，但仍然没有过滤器，现在我没有收到任何错误，这让我发疯了 =(
提前致谢！
【问题讨论】：
-
也许您实际上可以描述引发的错误/异常，或者至少描述预期行为和实际行为，以便我们为您提供帮助:)
-
绝对是@CharlieBrown，再看一遍 =)
标签： javascript json reactjs pagination