【发布时间】：2020-11-17 20:02:25
【问题描述】：
我使用 unsplash api 制作了一个图像搜索应用程序。该应用程序包含分页，这就是问题所在。当我搜索诸如花之类的东西时，它会在第一页显示花，但是当我转到第二页时，不再有花，而是由 componentDidMount 中的 fetchPhotos 函数生成的默认照片，因为重新渲染我相信。有没有一种方法可以让我在刷新页面之前查看所有页面中的搜索查询结果？
App.js
import React, { Component } from "react";
import Pagination from "./Pagination";
import List from "./List";
import "./styles.css";
import axios from "axios";
const LOAD_STATE = {
SUCCESS: "SUCCESS",
ERROR: "ERROR",
LOADING: "LOADING"
};
const appId = "N1ZIgf1m1v9gZJhledpAOTXqS8HqL2DuiEyXZI9Uhsk";
const BASE_URL = "https://api.unsplash.com/photos?page=1";
export default class App extends Component {
constructor() {
super();
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
photos: [],
totalPhotos: 0,
perPage: 5,
currentPage: 1,
loadState: LOAD_STATE.LOADING,
search: ""
};
}
handleChange(e) {
this.setState({ search: e.target.value });
}
handleSubmit() {
const { search, perPage } = this.state;
console.log(search);
const url =
"https://api.unsplash.com/search/photos?page=1&query=" +
search +
"&client_id=" +
appId;
const options = {
params: {
client_id: appId,
page: 1,
per_page: perPage,
order_by: "popularity"
}
};
this.setState({ loadState: LOAD_STATE.LOADING });
axios
.get(url, options)
.then(response => {
console.log(typeof response.data);
let photos;
try {
photos = response.data.results;
} catch {
photos = [];
}
this.setState({
photos,
totalPhotos: parseInt(response.headers["x-total"]),
currentPage: 1,
loadState: LOAD_STATE.SUCCESS
});
})
.catch(() => {
this.setState({ loadState: LOAD_STATE.ERROR });
});
}
componentDidMount() {
this.fetchPhotos(this.state.currentPage);
}
fetchPhotos(page) {
var self = this;
const { perPage } = this.state;
const options = {
params: {
client_id: appId,
page: page,
per_page: perPage,
order_by: "popularity"
}
};
this.setState({ loadState: LOAD_STATE.LOADING });
axios
.get(BASE_URL, options)
.then(response => {
self.setState({
photos: response.data,
totalPhotos: parseInt(response.headers["x-total"]),
currentPage: page,
loadState: LOAD_STATE.SUCCESS
});
})
.catch(() => {
this.setState({ loadState: LOAD_STATE.ERROR });
});
}
render() {
return (
<div className="app">
<input
onChange={this.handleChange}
type="text"
name="search"
placeholder="Enter query"
/>
<button type="submit" onClick={this.handleSubmit} className="button">
Submit
</button>
<Pagination
current={this.state.currentPage}
total={this.state.totalPhotos}
perPage={this.state.perPage}
onPageChanged={this.fetchPhotos.bind(this)}
/>
{this.state.loadState === LOAD_STATE.LOADING ? (
<div className="loader" />
) : (
<List data={this.state.photos} />
)}
</div>
);
}
}
分页
import React, { Component } from "react";
export default class Pagination extends Component {
pages() {
var pages = [];
for (var i = this.rangeStart(); i <= this.rangeEnd(); i++) {
pages.push(i);
}
return pages;
}
rangeStart() {
var start = this.props.current - this.props.pageRange;
return start > 0 ? start : 1;
}
rangeEnd() {
var end = this.props.current + this.props.pageRange;
var totalPages = this.totalPages();
return end < totalPages ? end : totalPages;
}
totalPages() {
return Math.ceil(this.props.total / this.props.perPage);
}
nextPage() {
return this.props.current + 1;
}
prevPage() {
return this.props.current - 1;
}
hasFirst() {
return this.rangeStart() !== 1;
}
hasLast() {
return this.rangeEnd() < this.totalPages();
}
hasPrev() {
return this.props.current > 1;
}
hasNext() {
return this.props.current < this.totalPages();
}
changePage(page) {
this.props.onPageChanged(page);
}
render() {
return (
<div className="pagination">
<div className="pagination__left">
<a
href="#"
className={!this.hasPrev() ? "hidden" : ""}
onClick={e => this.changePage(this.prevPage())}
>
Prev
</a>
</div>
<div className="pagination__mid">
<ul>
<li className={!this.hasFirst() ? "hidden" : ""}>
<a href="#" onClick={e => this.changePage(1)}>
1
</a>
</li>
<li className={!this.hasFirst() ? "hidden" : ""}>...</li>
{this.pages().map((page, index) => {
return (
<li key={index}>
<a
href="#"
onClick={e => this.changePage(page)}
className={this.props.current == page ? "current" : ""}
>
{page}
</a>
</li>
);
})}
<li className={!this.hasLast() ? "hidden" : ""}>...</li>
<li className={!this.hasLast() ? "hidden" : ""}>
<a href="#" onClick={e => this.changePage(this.totalPages())}>
{this.totalPages()}
</a>
</li>
</ul>
</div>
<div className="pagination__right">
<a
href="#"
className={!this.hasNext() ? "hidden" : ""}
onClick={e => this.changePage(this.nextPage())}
>
Next
</a>
</div>
</div>
);
}
}
Pagination.defaultProps = {
pageRange: 2
};
【问题讨论】：
标签： javascript reactjs pagination