我在reactjs中构建了一个无限滚动,其中数据是从用户点击页面底部的相同API加载的。现在,问题是从多个不同的API获取数据以获取其他数据。那么,实现这一目标的正确方法是什么。请帮我解决这个问题。这是我的代码。
import React from "react";
import { Link } from 'react-router-dom';
import axios from 'axios';
const BUSY = {};
class InfiniteData extends React.Component{
constructor(props){
super(props);
this.state={
olddata: [],
newData: [],
requestSent: false,
scrollCounter:1
}
this.handleOnScroll = this.handleOnScroll.bind(this)
this.buildData = this.buildData.bind(this)
}
componentDidMount(){
window.addEventListener('scroll', this.handleOnScroll);
this.doQuery(1).then(res=>
this.setState({
newData: this.state.newData.slice().concat(res),
requestSent: false
}))
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleOnScroll);
}
queryActive = false;
doQuery(queryParam) {
if(this.queryActive){
return Promise.resolve(BUSY);
}
this.queryActive=true;
switch(queryParam){
case 1: return this.buildData(queryParam).then((res)=>res).catch(err=>{})
break;
case 2: return this.buildData(queryParam).then((res)=>res);
break;
case 3: return this.buildData(queryParam).then((res)=>res);
break;
case 4: return this.buildData(queryParam).then((res)=>res);
break;
default: return true;
}
}
buildData(queryParam){
//there is no paging in getting posts, won't it just get the same posts?
return axios.get("https://jsonplaceholder.typicode.com/posts")
.then( res=> {this.queryActive=false;return res.data;})
.catch(err=>{
this.queryActive=false;
return Promise.reject(err);
})
}
handleOnScroll(){
var scrollCounter=0;
var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
var clientHeight = document.documentElement.clientHeight || window.innerHeight;
var scrolledToBottom = Math.ceil(scrollTop + clientHeight) >= scrollHeight;
if (scrolledToBottom) {
this.setState({
scrollCounter: this.state.scrollCounter + Math.floor(scrolledToBottom)
})
if(this.state.scrollCounter<5){
this.doQuery(this.state.scrollCounter).then(res=>
(res===BUSY)
? false
: this.setState({
newData: this.state.newData.slice().concat(res)
})
)
.catch(err=>this.setState({requestSent: false}))
this.setState({requestSent: true});
}else{
return true
}
}
}
render()
{
return (
<div>
<div className="data-container">
<div className="row ">
{this.state.newData && this.state.newData.map((dat,i)=>
<div key={i} className="col-lg-4">
<div className="bordered">
{dat.body}
</div>
</div>
)}
</div>
</div>
</div>
);
}
}
export default InfiniteData;
答案 0 :(得分:2)
你可以添加一个名为BUSY的常量,供doQuery用作它已经忙于发出请求的返回值:
import React from "react";
import { Link } from 'react-router-dom';
import axios from 'axios';
const BUSY = {};
您可以对doQuery进行一些更改:
queryActive = false;
doQuery() {
if(this.queryActive){
return Promise.resolve(BUSY);
}
this.queryActive=true;
//there is no paging in getting posts, won't it just get the same posts?
return axios.get("https://jsonplaceholder.typicode.com/posts")
.then( res=> {this.queryActive=false;return res.data;})
.catch(err=>{
//before you were only console.logging the error but that causes you
// to create a promise that doesn't reject but resolves with undefined
// when something goes wrong
this.queryActive=false;
console.warn(err);
return Promise.reject(err);
})
}
当你调用doQuery时,如果结果为BUSY:
,请确保忽略结果this.doQuery().then(res=>
(res===BUSY)
? false
: this.setState({
newData: this.state.newData.slice().concat(res)
})
)
.catch(err=>this.setState({requestSent: false}))
this.setState({requestSent: true});