Javascript 在视图中追加新项
我创建了一个图像搜索应用程序,其中当前显示9幅图像。我想要一个加载更多按钮,当点击该按钮时,会在现有的9张图片下方显示另外9张图片。现在,当我点击“加载更多”按钮时,它确实显示了新的9幅图像,但之前的9幅图像都消失了。单击“加载更多”时如何显示所有图像 App.jsJavascript 在视图中追加新项,javascript,reactjs,Javascript,Reactjs,我创建了一个图像搜索应用程序,其中当前显示9幅图像。我想要一个加载更多按钮,当点击该按钮时,会在现有的9张图片下方显示另外9张图片。现在,当我点击“加载更多”按钮时,它确实显示了新的9幅图像,但之前的9幅图像都消失了。单击“加载更多”时如何显示所有图像 App.js import React, { Component } from "react"; import Pagination from "./Pagination"; import List fro
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";
export default class App extends Component {
constructor() {
super();
this.handleChange = this.handleChange.bind(this);
this.fetchPhotos = this.fetchPhotos.bind(this);
this.state = {
photos: [],
totalPhotos: 0,
perPage: 5,
currentPage: 1,
loadState: LOAD_STATE.LOADING,
search: ""
};
}
handleChange(e) {
this.setState({ search: e.target.value });
}
componentDidMount() {
this.fetchPhotos(this.state.currentPage);
}
fetchPhotos(page = 1) {
var self = this;
const { search, perPage } = this.state;
const url1 = `https://api.unsplash.com/photos?page=${page}&client_id=${appId}`;
const url2 =
`https://api.unsplash.com/search/photos?page=${page}&query=` +
search +
"&client_id=" +
appId;
const url = search ? url2 : url1;
if (search) {
const options = {
params: {
page: page,
per_page: perPage,
order_by: "popularity"
}
};
this.setState({ loadState: LOAD_STATE.LOADING });
axios
.get(url, options)
.then(response => {
this.setState({
photos: response.data.results,
totalPhotos: parseInt(response.headers["x-total"]),
currentPage: page,
loadState: LOAD_STATE.SUCCESS
});
})
.catch(() => {
this.setState({ loadState: LOAD_STATE.ERROR });
});
} else {
const options = {
params: {
client_id: appId,
page: page,
per_page: perPage,
order_by: "popularity"
}
};
this.setState({ loadState: LOAD_STATE.LOADING });
axios
.get(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.fetchPhotos(1)}
className="button"
>
Submit
</button>
{this.state.loadState === LOAD_STATE.LOADING ? (
<div className="loader" />
) : (
<List data={this.state.photos} />
)}
<Pagination
current={this.state.currentPage}
total={this.state.totalPhotos}
perPage={this.state.perPage}
onPageChanged={this.fetchPhotos.bind(this)}
/>
</div>
);
}
}
import React,{Component}来自“React”;
从“/Pagination”导入分页;
从“/List”导入列表;
导入“/styles.css”;
从“axios”导入axios;
常量加载状态={
成功:“成功”,
错误:“错误”,
加载:“加载”
};
const appId=“N1ZIgf1m1v9gZJhledpAOTXqS8HqL2DuiEyXZI9Uhsk”;
导出默认类应用程序扩展组件{
构造函数(){
超级();
this.handleChange=this.handleChange.bind(this);
this.fetchPhotos=this.fetchPhotos.bind(this);
此.state={
照片:[],
照片总数:0,
每页:5,
当前页面:1,
loadState:LOAD_STATE.LOADING,
搜索:“
};
}
手变(e){
this.setState({search:e.target.value});
}
componentDidMount(){
this.fetchPhotos(this.state.currentPage);
}
获取照片(第页=1){
var self=这个;
const{search,perPage}=this.state;
常量url1=`https://api.unsplash.com/photos?page=${page}&client_id=${appId}`;
常量url2=
`https://api.unsplash.com/search/photos?page=${page}&query=`+
搜寻+
“&client\u id=”+
appId;
const url=search?url2:url1;
如果(搜索){
常量选项={
参数:{
第页:第页,
每页:每页,
订购人:“受欢迎程度”
}
};
this.setState({loadState:LOAD_STATE.LOADING});
axios
.get(url、选项)
。然后(响应=>{
这是我的国家({
照片:回复。数据。结果,
totalPhotos:parseInt(response.headers[“x-total”]),
当前页:第页,
loadState:LOAD_STATE.SUCCESS
});
})
.catch(()=>{
this.setState({loadState:LOAD_STATE.ERROR});
});
}否则{
常量选项={
参数:{
客户id:appId,
第页:第页,
每页:每页,
订购人:“受欢迎程度”
}
};
this.setState({loadState:LOAD_STATE.LOADING});
axios
.get(url、选项)
。然后(响应=>{
自我状态({
照片:response.data,
totalPhotos:parseInt(response.headers[“x-total”]),
当前页:第页,
loadState:LOAD_STATE.SUCCESS
});
})
.catch(()=>{
this.setState({loadState:LOAD_STATE.ERROR});
});
}
}
render(){
返回(
这是一张照片(1)}
className=“按钮”
>
提交
{this.state.loadState===LOAD\u state.LOADING(
) : (
)}
);
}
}
List.js
import React from "react";
import ListItem from "./ListItem";
const List = ({ data }) => {
var items = data.map(photo => <ListItem key={photo.id} photo={photo} />);
return <div className="grid">{items}</div>;
};
export default List;
从“React”导入React;
从“/ListItem”导入ListItem;
常量列表=({data})=>{
var items=data.map(photo=>);
返回{items};
};
导出默认列表;
Pagination.js
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__right">
<a
href="#"
className={!this.hasNext() ? "hidden" : ""}
onClick={e => this.changePage(this.nextPage())}
>
Load More
</a>
</div>
</div>
);
}
}
Pagination.defaultProps = {
pageRange: 2
};
import React,{Component}来自“React”;
导出默认类分页扩展组件{
第()页{
var页面=[];
对于(var i=this.rangeStart();i 0?开始:1;
}
rangeEnd(){
var end=this.props.current+this.props.pageRange;
var totalPages=this.totalPages();
返回结束1;
}
hasNext(){
返回this.props.current
问题是您正在用新的响应覆盖当前的照片
状态。您必须将响应附加到现有的照片
状态
axios
.get(url、选项)
。然后(响应=>{
自我状态({
照片:[…this.state.photos,…response.data],//使用扩展语法
...
});
})
...
问题是您正在用新的响应覆盖当前的照片
状态。您必须将响应附加到现有的照片
状态
axios
.get(url、选项)
。然后(响应=>{
自我状态({
照片:[…this.state.photos,…response.data],//使用扩展语法
...
});
})
...
也许你可以在设置了状态后尝试自动滚动到页面底部。更多信息,这里是vanilla js。你能告诉我如何在我的组件中实现吗?也许你可以在设置了状态后尝试自动滚动到页面底部。更多信息,这里是vanilla js。你能告诉我如何实现吗在我的组件中做吗?